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

雷霆半月斩掉你的板砖2024-03-30 9:53

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绑定一个点击事件

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

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