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

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

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


先导入文件

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

接写来就是渲染内容了

 

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


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


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

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


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

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

相关文章
|
2天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
31 0
|
2天前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
47 0
|
5月前
|
前端开发 数据库 Docker
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
51 0
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
10 0
|
2天前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
2天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
29 0
|
2天前
|
前端开发 API 开发者
React这些新特性在开发效率上有哪些改进
【4月更文挑战第18天】React 18 提升开发效率,引入新Root API `createRoot`优化挂载,支持渐进式升级,减少迁移成本。新增性能工具如Profiler API和Concurrent Mode,自动化批处理提高性能,减少重渲染。服务器组件优化加载速度,减轻客户端负担。开发者可更高效构建和优化React应用。
74 6

热门文章

最新文章