antd中initialvalues的使用
时间: 2023-08-29 18:02:59 浏览: 150
antd中的initialValues是一个用于初始化表单字段值的属性。它可以通过一个对象来传递初始值给表单的字段。
通常情况下,我们需要在表单中显示已经存在的数据。例如,当我们编辑一个用户的信息时,需要将用户的已有信息显示在表单中,这时就可以使用initialValues来设置初始值。
initialValues的使用方法很简单,只需在Form组件中使用initialValues属性,并将一个包含字段值的对象赋值给它即可。
例如,我们有一个用户编辑表单,需要初始化表单字段值。我们可以先定义一个包含用户信息的对象user,然后将其传递给initialValues属性。
```
import { Form, Input, Button } from 'antd';
const user = {
name: 'Tom',
age: 18,
email: 'tom@example.com'
};
const DemoForm = () => {
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form
name="demo"
onFinish={onFinish}
initialValues={user} // 将user对象作为initialValues的值
>
<Form.Item
label="Name"
name="name"
>
<Input />
</Form.Item>
<Form.Item
label="Age"
name="age"
>
<Input />
</Form.Item>
<Form.Item
label="Email"
name="email"
>
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default DemoForm;
```
在上面的例子中,我们定义了一个包含name、age和email字段的user对象,并将其传递给Form组件的initialValues属性。这样,在表单渲染时,这些字段就会被初始化为对应的值。
这就是antd中initialValues的使用方法,通过它可以方便地初始化表单的字段值。