在前端开发中，表单一直是一个重要且不可避免的部分。然而，为了方便表单的管理和验证，我们需要借助一些工具和框架来帮助我们完成这些任务。今天，我要介绍的是一个非常便利的 npm 包，它就是 @instancejs/simple-react-forms。通过这个 npm 包，我们可以快速地构建出符合需求的表单，并进行数据校验。下面，我将介绍该 npm 包的使用教程和示例代码。
什么是 @instancejs/simple-react-forms
@instancejs/simple-react-forms 是一个帮助我们快速构建和管理表单的 React 组件库。使用它，我们可以快速地完成表单的构建和验证，并且可以扩展自定义组件以适应我们的需求。它特别适用于快速迭代和开发，尤其是在需要分阶段构建表单和验证的时候。
安装和使用
安装该 npm 包可以使用 npm 或者 yarn：
npm install @instancejs/simple-react-forms # or yarn add @instancejs/simple-react-forms
在安装完成之后，我们可以在代码中直接导入简单表单需要的组件。下面是一个简单的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ---------- ------------ - ---- ---------------------------------
-------- ----- -
----- ------------ - ------ -- -
------------------
--
------ -
----- ------------------------
---------- --------------- ---------------- -------- --
---------- --------------- ---------------- -------- --
-----------------------------------
-------
--
-在这个例子中，我们首先导入需要的组件，然后定义了一个表单，包含了一个文本输入框和一个提交按钮。我们可以通过 onSubmit 函数来接收表单提交事件并进行处理。
当然，上面只是一个简单的例子，@instancejs/simple-react-forms 提供了许多其他的表单组件和验证方式，比如复选框、单选框、下拉选择框等等。在这篇文章中，我们将逐步了解这些内容。
表单组件
TextInput
文本输入框是最常见的表单组件之一。这个组件用于接收用户输入的字符串。
<TextInput name="username" label="Username" required />
在上面的例子中，我们定义了一个文本输入框，需要用户输入用户名。name 属性是必须的，因为它用于在表单的数据模型和状态中标识这个输入框，而 label 属性则是可选的，用于为输入框添加可读的标签或提示。
PasswordInput
密码输入框与文本输入框的作用基本一致，只是它的类型为 password，所以输入的内容会被隐藏。
<PasswordInput name="password" label="Password" required />
EmailInput / TelInput
EmailInput 和 TelInput 分别是用于接收电子邮件地址和电话号码的输入框。
<EmailInput name="email" label="Email" required /> <TelInput name="phone" label="Phone" required />
SelectInput
SelectInput 是用于选择下拉框的组件。下面的代码展示了一个包含多个选项的下拉框：
<SelectInput name="country" label="Country" required> <option value="cn">China</option> <option value="us">United States</option> <option value="jp">Japan</option> </SelectInput>
CheckboxInput 和 CheckboxGroup
CheckboxInput 用于创建一个单个的勾选框，而 CheckboxGroup 可以创建一个包含多个复选框的组。
<CheckboxInput name="rememberMe" label="Remember me" /> <CheckboxGroup name="skills" label="Skills" required> <CheckboxInput name="javascript" label="JavaScript" /> <CheckboxInput name="react" label="React" /> <CheckboxInput name="vue" label="Vue" /> </CheckboxGroup>
RadioInput 和 RadioGroup
如果需要从多个互斥的选项中进行选择，则可以使用 RadioInput 和 RadioGroup。它们与复选框相似，只不过是单选框。
<RadioInput name="gender" label="Male" value="male" required /> <RadioInput name="gender" label="Female" value="female" required /> <RadioGroup name="gender"> <RadioInput name="gender" label="Male" value="male" /> <RadioInput name="gender" label="Female" value="female" /> </RadioGroup>
以上是 @instancejs/simple-react-forms 提供的一些基本组件，它们可以满足我们绝大多数业务需求。但是有时候我们需要更灵活多样的表单界面，这时我们可以扩展 AbstractInput 和 AbstractGroup 这两个基础组件来实现自己的组件。
定制组件
@instancejs/simple-react-forms 非常灵活，它允许我们使用 AbstractInput 和 AbstractGroup 这两个基础组件构建自己的表单组件。通过扩展这两个基本组件，我们可以创建出适合自己的表单。
AbstractInput
AbstractInput 是一个抽象的表单组件，它提供了一些能够用于继承的方法和属性，我们可以通过继承 AbstractInput 来创建出自己的表单组件。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ---------------------------------
----- ------- ------- ------------- -
------------- -
----- - ----- ----- - - -----------
------ -
------ ----------- ------------- ---------------------------- --
--
-
-
------ ------- --------在这个例子中，我们使用继承机制，继承了 AbstractInput 并修改了其中的 renderInput 方法。renderInput 方法返回了实际的表单元素。然后，我们可以将 MyInput 组件当作普通的文本输入框来使用。
<MyInput name="myinput" label="My Input" required />
AbstractGroup
如果一个表单组件不够用，我们可以使用 AbstractGroup 来创建一个具有更高度自定义的表单组件。下面的例子展示了如何创建一个自定义组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ---------------------------------
----- ------------- ------- ------------- -
-------- -
------ -
-----
---------------------------------
-----------------------
------
--
-
-
------ ------- --------------在这个例子中，我们重写了 render() 方法和 renderChildren() 方法。renderChildren() 会渲染所有的子节点，并递归实现自定义组件的渲染。然后我们可以将组件直接当作 CheckboxGroup 或 RadioGroup 等组件来使用。
<MyCustomGroup name="skills" label="Skills"> <CheckboxInput name="javascript" label="JavaScript" /> <CheckboxInput name="react" label="React" /> <CheckboxInput name="vue" label="Vue" /> </MyCustomGroup>
数据验证
除了构建表单界面外，数据验证也是表单的一部分。@instancejs/simple-react-forms 支持多种类型的数据验证，包括必填项检查、输入格式检查等等。下面是一个简单的例子：
<TextInput name="username" label="Username" required /> <PasswordInput name="password" label="Password" required /> <SelectInput name="country" label="Country" required> <option value="cn">China</option> <option value="us">United States</option> <option value="jp">Japan</option> </SelectInput>
在这个例子中，我们通过 required 属性指定了必填项，如果未填写那么将会提示错误信息。如果需要更加详细的数据校验规则，我们可以使用 Schema 模式，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
----------
-----
---------------
- ---- ---------------------------------
------ - -- --- ---- ------
----- ---------------- - --------------------
--------- ------------------------
--------- ------------------------
-------- ------------------------- ----- ------------------
---
----- ------ - -------------------- -
-----------------
---
-------- ----- -
------ -
------- ------------ -- ----
---------- --------------- ---------------- --
---------- --------------- ---------------- --
------------ -------------- ----------------
------- -------------------------
------- ----------------- ---------------
------- -------------------------
--------------
---------
--
-在这个例子中，我们使用了 Yup 库来定义了数据校验的规则。然后，我们使用 withValidation 函数，将这个规则应用到了 Form 组件上。
参考
@instancejs/simple-react-forms 官方文档：https://github.com/instance-js/simple-react-forms
Yup 官方文档：https://github.com/jquense/yup
总结
在本文中，我们介绍了 @instancejs/simple-react-forms 这个 npm 包的基本用法和注意事项。我们通过展示其提供的各种组件和验证方式，以及如何扩展自定义组件，帮助开发者更好地掌握这个库。希望本篇文章能帮助到大家，欢迎大家发表意见和交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738681e8991b448e979c