antd setfieldvalue如何使用
时间: 2023-07-20 21:45:05 浏览: 47
Ant Design(antd)的 `Form` 组件提供了 `setFieldsValue` 方法,用于设置表单字段的值。使用方法如下:
1. 在组件中引入 `Form` 和 `Input` 组件
```jsx
import { Form, Input } from 'antd';
```
2. 定义表单字段
```jsx
const [form] = Form.useForm();
const formFields = [
{
name: 'username',
label: 'Username',
rules: [{ required: true, message: 'Username is required' }],
},
{
name: 'password',
label: 'Password',
rules: [{ required: true, message: 'Password is required' }],
},
];
```
3. 渲染表单
```jsx
<Form form={form} onFinish={onFinish}>
{formFields.map(({ name, label, rules }) => (
<Form.Item key={name} name={name} label={label} rules={rules}>
<Input />
</Form.Item>
))}
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
```
4. 在需要设置表单字段值的地方调用 `setFieldsValue` 方法
```jsx
form.setFieldsValue({
username: 'John',
password: '123456',
});
```
完整示例代码:
```jsx
import { Form, Input, Button } from 'antd';
const formFields = [
{
name: 'username',
label: 'Username',
rules: [{ required: true, message: 'Username is required' }],
},
{
name: 'password',
label: 'Password',
rules: [{ required: true, message: 'Password is required' }],
},
];
export default function MyForm() {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const handleSetFieldsValue = () => {
form.setFieldsValue({
username: 'John',
password: '123456',
});
};
return (
<div>
<Form form={form} onFinish={onFinish}>
{formFields.map(({ name, label, rules }) => (
<Form.Item key={name} name={name} label={label} rules={rules}>
<Input />
</Form.Item>
))}
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
<Button onClick={handleSetFieldsValue}>Set Fields Value</Button>
</div>
);
}
```