Ant Design:Form表单组件的正确使用

简介: Ant Design:Form表单组件的正确使用

Form


设置表单初始默认值 initialValues (只在初始化和重置表单时生效) | Object

表单字段状态发生改变触发的回调函数 onValuesChange | function(changedValues,allValues)


Form.Item


为子组件的字段设置字段名 name | String

          <Form
            initialValues={{
              name:`小明`//为字段名为name的表单项设置初始值为小明  
            }}
            onValuesChange={(changedValues, allValues) => {
              console.log(allValues);
            }}
          >
             <Form.Item
              label={`姓名`}
              name={`name`}//为子组件添加字段名
              >
                <Input />//这时此输入框的默认值为小明
             </Form.Item>
          </Form>


场景1:添加


在添加的表单中,默认值一般都为空,或者是真假状态的,所以说为Form的 initialValues 属性内的表单项的字段名称对应的值设为空的字符串,或者false默认的radio单选初始值即可。


接着使用一个状态在 onValuesChange 事件中拿到最新的整个表单数据:

       <Form
            initialValues={{
              name:`小明`//为字段名为name的表单项设置初始值为小明  
            }}
            onValuesChange={(changedValues, allValues) => {
              console.log(allValues);//changedValues为当前在发生变化的字段项,
              setFormObj(allValues);//allValues为整个最新的状态的表单对象
            }}
          >
             <Form.Item
              label={`姓名`}
              name={`name`}//为子组件添加字段名
              >
                <Input />//这时此输入框的默认值为小明
             </Form.Item>
          </Form>


changedValues为当前在发生变化的字段项

allValues为整个最新的状态的表单对象

现在setFormObj为最新的整个表单对象,那么在提交表单的时候可直接拿来当做请求体的值来发送;


场景2:编辑


编辑与添加大致相同

编辑时的初始值为当前编辑项,所以直接可直接将当前编辑项的整个对象数据放入initialValues属性中当做值即可。

在打开编辑时显示的自然是当前编辑的这项的所有状态,接着还是在 onValuesChange 中使用一个状态拿到最新的更改后的数据提交编辑即可。


相关文章
|
JSON 安全 Java
什么是JWT?如何使用Spring Boot Security实现它?
什么是JWT?如何使用Spring Boot Security实现它?
2248 5
IntelliJ IDEA小技巧,多光标同时输入
idea使用多光标多处同时输入的三个方法
|
小程序 前端开发 JavaScript
微信小程序连接数据库与WXS的使用
微信小程序连接数据库与WXS的使用
440 0
串口网口16进制发送的和ASCII发送以及16进制接收和ASCII接收区别
我们在工控软件中,会经常使用到网口和串口,去接受和发送数据。通常我们发送数据的模式有两种,一种16进制,一种是ASCII码。16进制的的经常会用来和仪器PLC等设备通讯。ACSII码是一种文本模式。
2044 0
串口网口16进制发送的和ASCII发送以及16进制接收和ASCII接收区别
|
存储 小程序
微信小程序使用本地存储方法wx.setStorageSync()和wx.getStorageSync()
微信小程序使用本地存储方法wx.setStorageSync()和wx.getStorageSync()
|
7月前
|
人工智能 自然语言处理 API
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
|
监控 Java Android开发
深入探索Android系统的内存管理机制
本文旨在全面解析Android系统的内存管理机制,包括其工作原理、常见问题及其解决方案。通过对Android内存模型的深入分析,本文将帮助开发者更好地理解内存分配、回收以及优化策略,从而提高应用性能和用户体验。
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
814 1
react项目配合diff实现文件对比差异功能
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
556 1
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist
若依修改,This relative module was not found:* ./@/assets/logo/logo.png in ./node_modules/css-loader/dist