antd Form 提交如何获取表单数据
时间: 2023-09-14 22:06:01 浏览: 295
在 Ant Design 中,可以使用 Form 组件的 onSubmit 属性来提交表单数据。在 onSubmit 函数中,可以通过 event.preventDefault() 来阻止表单默认提交行为,然后通过 form.getFieldsValue() 来获取表单数据。
示例代码如下:
```
import { Form, Button } from 'antd';
const Demo = () => {
const [form] = Form.useForm();
const handleSubmit = (event) => {
event.preventDefault();
const values = form.getFieldsValue();
console.log(values);
}
return (
<Form form={form} onSubmit={handleSubmit}>
<Form.Item name="username">
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item name="password">
<Input.Password placeholder="请输入密码" />
</Form.Item>
<Button htmlType="submit">提交</Button>
</Form>
);
}
```
在上面的例子中,当用户点击提交按钮时,会触发 handleSubmit 函数,阻止表单默认提交行为,并通过 form.getFieldsValue() 获取表单数据,然后打印到控制台上。
阅读全文