react使用ant desgin 组件实现便利开发

1.使用Form.item的方法和语法规则

先导入文件

javascript 复制代码
import {Form} from 'antd';
javascript 复制代码
const [form] = Form.useForm();
javascript 复制代码
<Form form={form} name="dynamic_rule" width="100%" onFinish={onFinish} onFinishFailed={onFinishFailed} >

接写来就是渲染内容了

javascript 复制代码
// 点击显示弹窗
    const showModal = () => {
        form.resetFields()
        setShibushi('新增项目')
        setIsModalOpen(true);
    };
    // 点击确定事件
    const handleOk = () => {
        form.submit()
        // setIsModalOpen(false);
    };

点击事件确定以后触发表单时间,这里我是使用的model对话框组件的onOK事件来调用表单验证事件的,这样可以实现效果比较好看一些

校验不通过就会是这样显示的一个效果,然后就是一个编辑的回显设置了

编辑需要给column绑定一个点击事件

就可以实现获取到当前表单的数据了

最后去给表单赋值就好啦!!!

相关推荐
@areok@6 分钟前
C++mat传入C#OpencvCSharp的mat
开发语言·c++·opencv·c#
小王C语言20 分钟前
【C++进阶】---- map和set的使用
开发语言·c++
Elnaij34 分钟前
从C++开始的编程生活(8)——内部类、匿名对象、对象拷贝时的编译器优化和内存管理
开发语言·c++
yb0os11 小时前
RPC实战和核心原理学习(一)----基础
java·开发语言·网络·数据结构·学习·计算机·rpc
liuyao_xianhui1 小时前
内存管理(C/C++)
java·开发语言·c++
饭碗的彼岸one1 小时前
C++设计模式之单例模式
c语言·开发语言·c++·单例模式·设计模式·饿汉模式·懒汉模式
青铜发条2 小时前
【Qt】PyQt、原生QT、PySide6三者的多方面比较
开发语言·qt·pyqt
wanzhong23333 小时前
学习triton-第1课 向量加法
开发语言·python·高性能计算
li35743 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
三千道应用题3 小时前
C#语言入门详解(18)传值、输出、引用、数组、具名、可选参数、扩展方法
开发语言·c#