README_zh-CN.md

📋🐜 React Hook Form Antd

用 React Hook Form 拿捏你的 Ant Design 表单！

English | 简体中文

📜 依赖

• 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 后的示例

你只需要：

1. 从 react-hook-form 中使用 useForm 并获取 control
2. 从 react-hook-form-antd 中使用 FormItem 代替 Form.Item
   • 将 control 传递给所有的 FormItem （字段名能从 control 中推断 😎）
   • 移除 rules 并使用 react hook form resolver 替代 （你可以使用任何验证库的 schema 以验证表单 🤩）
   • 在 onFinish 中使用 handleSubmit
3. 搞定！ 🎉

🕹 API

🔗 FormItem

Ant Design Form.Item API

一个用于替代 antd 中的 Form.Item 的组件。它已经继承了 Form.Item 中除了 rules validateStatus 之外的所有参数（如果你需要 rules，请使用 react hook form resolver 替代）

新增和修改的参数:

参数	类型	描述
control	Control	来自 useForm 的 control 对象
name	string	表单字段名