react自动触发表单提交_react表单提交

### 实现表单提交时触发校验 在 Ant Design React 中实现表单提交时触发表单校验可以通过 `Form` 组件提供的 API 来完成。具体来说，可以使用 `form.validateFields()` 方法来手动触发表单验证[^1]。 当用户点击提交按钮时，调用此方法会遍历所有注册过的字段并执行相应的校验逻辑。如果所有的字段都通过了校验，则返回包含这些字段值的对象；如果有任何一个字段未通过校验，则不会继续执行后续操作，并显示错误提示给用户查看。 下面是一个简单的例子展示如何在一个组件内集成上述功能： ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const onFinish = (values) => { console.log('Success:', values); }; const onSubmit = async () => { try { await formRef.current.validateFields(); formRef.current.submit(); // 提交数据到服务器或其他处理逻辑 } catch (errorInfo) { console.log('Failed:', errorInfo); } }; return ( <Form ref={formRef} name="basic" initialValues={{ remember: true }} onFinish={onFinish}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input /> </Form.Item> <Form.Item> <Button type="primary" onClick={onSubmit}> Submit </Button> </Form.Item> </Form> ); }; export default MyForm; ``` 在这个例子中，定义了一个名为 `MyForm` 的函数式组件，在其中创建了一个带有用户名输入框的简单表单。注意这里使用了 `ref` 属性关联到了外部声明的一个 `React.createRef()` 对象上以便于访问内部的方法。当点击 "Submit" 按钮时，会先尝试调用 `validateFields()` 进行校验，只有在校验成功的情况下才会真正提交表单内容。