- react-hook-form
^7
- antd
^5
npm install react-hook-form-antd
你可能原本有一个如下的 antd 表单
显示代码
<Form onFinish={onFinish}>
<Form.Item
label="Username"
name="username"
rules={[
{ required: true, message: 'Required' },
{ max: 15, message: 'Username should be less than 15 characters' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Required' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
查看这个表单在使用 react-hook-form-antd
后的示例
你只需要:
- 从
react-hook-form
中使用useForm
并获取control
- 从
react-hook-form-antd
中使用FormItem
代替Form.Item
- 将
control
传递给所有的FormItem
(字段名能从control
中推断 😎) - 移除
rules
并使用 react hook form resolver 替代 (你可以使用任何验证库的 schema 以验证表单 🤩) - 在
onFinish
中使用handleSubmit
- 将
- 搞定! 🎉
Ant Design
Form.Item
API
一个用于替代 antd 中的 Form.Item
的组件。它已经继承了 Form.Item
中除了 rules
validateStatus
之外的所有参数(如果你需要 rules,请使用 react hook form resolver 替代)
新增和修改的参数:
参数 | 类型 | 描述 |
---|---|---|
control |
Control | 来自 useForm 的 control 对象 |
name |
string | 表单字段名 |