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

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

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

相关推荐
2401_858286115 分钟前
OS15.【Linux】gdb调试器的简单使用
linux·运维·服务器·开发语言·gdb
牛马baby6 分钟前
MATLAB下载安装教程(附安装包)2025最新版(MATLAB R2024b)
开发语言·matlab
shenyan~15 分钟前
关于 c、c#、c++ 三者区别
开发语言·c++
Ashlee_code26 分钟前
什么是Web3?金融解决方案
开发语言·金融·架构·eclipse·web3·区块链·php
Evand J39 分钟前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导39 分钟前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt
10年前端老司机40 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
Heartoxx1 小时前
c语言-指针与一维数组
c语言·开发语言·算法
hqxstudying1 小时前
Java创建型模式---原型模式
java·开发语言·设计模式·代码规范
charlie1145141911 小时前
如何使用Qt创建一个浮在MainWindow上的滑动小Panel
开发语言·c++·qt·界面设计