函数组件中antdesign怎么拿到form表单的值
时间: 2024-05-02 07:18:40 浏览: 9
在函数组件中使用Ant Design的Form组件可以使用Hooks API来获取表单的值,具体步骤如下:
1. 使用`useForm` Hook来获取Form实例:
```
import { Form, Input, Button } from 'antd';
import { useForm } from 'antd/lib/form/Form';
const MyForm = () => {
const [form] = useForm();
...
}
```
2. 在需要的地方使用`form.getFieldValue`来获取表单的值:
```
const handleSubmit = () => {
const values = form.getFieldsValue();
console.log(values);
}
return (
<Form form={form}>
<Form.Item name="username" label="Username">
<Input />
</Form.Item>
<Form.Item name="password" label="Password">
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSubmit}>Submit</Button>
</Form.Item>
</Form>
);
```
在上述代码中,`form.getFieldsValue()`会返回一个对象,包含表单中所有字段的值。如果需要获取单个字段的值,可以使用`form.getFieldValue('fieldName')`方法。