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


相关文章
|
6月前
|
JavaScript
ant design vue 实现带参跳转页面
ant design vue 实现带参跳转页面
103 0
|
前端开发
ant design封装一个弹框组件
ant design封装一个弹框组件
110 0
|
6月前
Ant Design(antd)表单校验的一些注意事项
Ant Design(antd)表单校验的一些注意事项
147 0
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
前端开发
ant design form表单验证问题
ant design form表单验证问题
83 0
|
前端开发
ant design锚点组件
ant design锚点组件
86 0
ant-design:Upload组件上传图片组件封装
ant-design:Upload组件上传图片组件封装
401 0
|
前端开发 JavaScript
Ant-Design自定义样式
Ant-Design自定义样式
251 0
|
前端开发
前端hook项目moblie总结笔记-ant design进行动态表单添加
前端hook项目moblie总结笔记-ant design进行动态表单添加
119 0
|
前端开发
前端项目实战182-ant design Cascader实现自定义字段
前端项目实战182-ant design Cascader实现自定义字段
152 0