form.setFields 方法
时间: 2023-12-21 11:05:59 浏览: 34
Ant Design Pro 的 form.setFields 方法可以直接设置表单的值,而不会触发表单的重新渲染。setFields 方法接收一个对象作为参数,对象的 key 是表单字段的名称,value 是对应的值。
示例代码如下:
```jsx
import { Form } from 'antd';
const MyForm = () => {
const [form] = Form.useForm();
const initialValues = {
name: 'John',
age: 30,
gender: 'male',
}
const handleUpdate = () => {
const newValues = {
name: 'Jane',
age: 25,
gender: 'female',
}
form.setFields(newValues);
}
return (
<Form form={form} initialValues={initialValues}>
<Form.Item name="name" label="Name">
<Input />
</Form.Item>
<Form.Item name="age" label="Age">
<InputNumber />
</Form.Item>
<Form.Item name="gender" label="Gender">
<Select>
<Select.Option value="male">Male</Select.Option>
<Select.Option value="female">Female</Select.Option>
</Select>
</Form.Item>
<Button onClick={handleUpdate}>Update</Button>
</Form>
);
}
```
在上面的示例代码中,我们在初始化表单时设置了初始值,然后在点击 Update 按钮时调用了 handleUpdate 方法,该方法调用了 form.setFields 方法,将表单的值更新为新的值。注意,我们没有使用 setFieldsValue 方法,而是直接使用了 setFields 方法,这样可以避免触发表单的重新渲染。