Skip to content

Latest commit

 

History

History
94 lines (69 loc) · 3.18 KB

README_zh-CN.md

File metadata and controls

94 lines (69 loc) · 3.18 KB

📋🐜 React Hook Form Antd

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

version license size downloads

English | 简体中文

📜 依赖

🕶 示例

示例

📦 安装

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 来自 useFormcontrol 对象
name string 表单字段名