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


相关文章
|
2月前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
200 1
|
7月前
|
JavaScript
ant design vue 实现带参跳转页面
ant design vue 实现带参跳转页面
116 0
|
前端开发
ant design封装一个弹框组件
ant design封装一个弹框组件
117 0
|
7月前
Ant Design(antd)表单校验的一些注意事项
Ant Design(antd)表单校验的一些注意事项
174 0
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
设计模式 移动开发 前端开发
前端组件之Bootstrap与Ant design of Vue
前端组件之Bootstrap与Ant design of Vue
449 0
|
前端开发
ant design form表单验证问题
ant design form表单验证问题
89 0
|
前端开发
ant design锚点组件
ant design锚点组件
93 0
ant-design:Upload组件上传图片组件封装
ant-design:Upload组件上传图片组件封装
426 0
|
前端开发 JavaScript
Ant-Design自定义样式
Ant-Design自定义样式
262 0