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 中使用一个状态拿到最新的更改后的数据提交编辑即可。


相关文章
|
SQL Java 数据库连接
mybatis常见分页技术和自定义分页原理实战
mybatis常见分页技术和自定义分页原理实战
868 0
|
3月前
|
人工智能 自然语言处理 API
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
AI-Compass LLM推理框架+部署生态:整合vLLM、SGLang、LMDeploy等顶级加速框架,涵盖本地到云端全场景部署
|
7月前
|
人工智能 JavaScript 前端开发
一个支持阿里云百炼平台DeepSeek R1大模型(智能体)的Wordpress插件,AI Agent or Chatbot.
这是一个将阿里云DeepSeek AI服务集成到WordPress的聊天机器人插件,支持多轮对话、上下文记忆和自定义界面等功能。用户可通过短代码轻松添加到页面,并支持多种配置选项以满足不同需求。项目采用MIT协议授权,代码仓位于GitHub与Gitee。开发者Chi Leung为长期境外工作,代码注释以英文为主。适合需要在WordPress网站中快速部署AI助手的用户使用。
|
JavaScript Java 测试技术
基于SpringBoot+Vue的仓库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的仓库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
471 7
|
12月前
|
设计模式 前端开发 C#
使用 Prism 框架实现导航.NET 6.0 + WPF
使用 Prism 框架实现导航.NET 6.0 + WPF
365 10
|
关系型数据库 MySQL 大数据
C#使用SqlSugar操作MySQL数据库实现简单的增删改查
C#使用SqlSugar操作MySQL数据库实现简单的增删改查
661 2
|
机器学习/深度学习 数据采集 人工智能
构建一个基于AI的文本分类系统
【6月更文挑战第1天】构建基于AI的文本分类系统涉及数据预处理、特征提取、模型训练和预测。步骤包括:收集标注文本,进行预处理(清洗、分词、去停用词);使用词袋模型、TF-IDF或词嵌入提取特征;选择并训练模型(如朴素贝叶斯、SVM、CNN等);评估优化模型性能;最后部署模型进行预测,并定期更新维护。未来,关注点将扩展至模型的鲁棒性、可解释性和安全性。
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
263 0
Echarts实战案例代码(47):barGap属性实现不同系列的柱间距离且在最后一个 bar系列上才会生效
Echarts实战案例代码(47):barGap属性实现不同系列的柱间距离且在最后一个 bar系列上才会生效
513 0