antd setfieldvalue如何使用
时间: 2023-07-20 19:45:13 浏览: 183
`setFieldsValue` 是 Ant Design Form 组件提供的 API,用于动态设置表单字段的值。使用方法如下:
1. 在组件中引入 `Form` 和 `Input` 组件,并使用 `Form.create` 方法包装组件。
```
import { Form, Input } from 'antd';
class MyForm extends React.Component {
// ...
}
export default Form.create()(MyForm);
```
2. 在需要设置值的地方调用 `setFieldsValue` 方法,将需要设置的值作为参数传入。需要注意的是,参数是一个对象,其属性名与表单字段名相对应。
```
handleSetValue = () => {
const { form } = this.props;
form.setFieldsValue({
username: 'John Doe',
email: 'johndoe@example.com',
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form>
<Form.Item label="Username">
{getFieldDecorator('username')(<Input />)}
</Form.Item>
<Form.Item label="Email">
{getFieldDecorator('email')(<Input />)}
</Form.Item>
<Button onClick={this.handleSetValue}>Set values</Button>
</Form>
);
}
```
在上面的示例中,当用户点击 "Set values" 按钮时,表单中的 `username` 和 `email` 字段的值会被设置为 "John Doe" 和 "johndoe@example.com"。
阅读全文