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

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

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

相关推荐
Yurko1319 分钟前
【C语言】基本语法结构(上篇)
c语言·开发语言·学习
草莓熊Lotso29 分钟前
《C++ Stack 与 Queue 完全使用指南:基础操作 + 经典场景 + 实战习题》
开发语言·c++·算法
孤客网络科技工作室30 分钟前
Python - 100天从新手到大师:第五十七天获取网络资源及解析HTML页面
开发语言·python·html
武文斌7731 分钟前
复习总结最终版:计算机网络
linux·开发语言·学习·计算机网络
帅大大的架构之路1 小时前
高级篇:Python脚本(101-150)
开发语言·python
reasonsummer2 小时前
【办公类-115-06】20250920职称资料上传04——docx复制、docx转PDF(课程表11个)
开发语言·windows·python·c#
栀寒老醑3 小时前
Python实现的服务器日志监控脚本
开发语言·python
星星点点洲3 小时前
PostgreSQL 15二进制文件
开发语言·设计模式·golang
小糖学代码3 小时前
Linux:11.线程概念与控制
linux·服务器·c语言·开发语言·c++
yaoxin5211234 小时前
211. Java 异常 - Java 异常机制总结
java·开发语言·python