react antd form如何赋值
时间: 2023-05-10 21:02:23 浏览: 152
React Antd Form是一个基于React框架的组件库,用于快速构建表单。在使用React Antd Form时,常常会遇到需要在表单中进行赋值的情况。
React Antd Form提供了多种赋值方式,下面分别介绍常用的两种方式:
1. setFieldsValue
setFieldsValue方法用于直接设置表单数据。可以使用该方法将已有的数据赋值给表单中的相应字段。该方法接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。
使用示例:
const data = { name: 'Jack', age: 28 };
form.setFieldsValue(data);
在上面的示例代码中,我们将一个包含name和age属性的对象data直接赋值给表单form。
2. initialValues
initialValues属性用于在表单初始化时设置初始值。该属性接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。
如果需要动态地修改表单中的初始值,可以将initialValues属性作为Form组件的props传入,在表单初始化后再通过setFieldsValue方法进行修改。
使用示例:
const data = { name: 'Jack', age: 28 };
<Form initialValues={data}>
<Form.Item label="Name" name="name"><Input /></Form.Item>
<Form.Item label="Age" name="age"><InputNumber /></Form.Item>
</Form>
在上面的示例代码中,我们将包含name和age属性的对象data作为initialValues传入表单组件中。
总的来说,虽然React Antd Form提供了多种赋值方式,但常见的数据赋值需求基本可以通过使用setFieldsValue方法和initialValues属性来完成。用户可以根据实际需求选择合适的方式来进行赋值。
阅读全文