在前端开发中，构建表单是一个很常见的任务。但是，每次都从头开始构建一个表单往往会变得很繁琐，也非常容易出错。因此，我们需要一个方便且可靠的表单组件库，而 npm 包 @suchy/form-component 就是一个很好的选择。
安装
在终端中输入以下命令来安装 @suchy/form-component：
npm install @suchy/form-component --save
使用
在你的项目中引入 @suchy/form-component：
import { Form, Input, Checkbox } from '@suchy/form-component';接下来，你可以像下面这样创建一个表单：
<Form onSubmit={handleSubmit}>
<Input label="用户名" name="username" />
<Input label="密码" name="password" type="password" />
<Checkbox label="记住密码" name="rememberMe" />
<button type="submit">登录</button>
</Form>在这个表单中，有两个输入框和一个复选框，还有一个提交按钮。当表单被提交时，handleSubmit函数将会被调用。
组件
<Form>
<Form>是表单的主要组件，它负责处理表单的提交事件和验证。你可以给它传入一个 onSubmit 函数用于处理表单提交。
const handleSubmit = (data) => {
console.log(data);
};
<Form onSubmit={handleSubmit}>
<!-- 包含表单元素的子组件 -->
</Form><Input>
<Input>组件用于创建一个文本输入框，同时也可以设置输入框的标签和名称。
<Input label="用户名" name="username" />
<Checkbox>
<Checkbox>组件用于创建一个复选框，同时也可以设置复选框的标签和名称。
<Checkbox label="记住密码" name="rememberMe" />
表单验证
@suchy/form-component 可以非常方便的对表单进行验证。
必填字段
如果想要某个输入框必须填写，可以使用 required 属性来进行输入验证。
<Input label="用户名" name="username" required />
正则匹配
如果想要表单元素的值匹配一个正则表达式，可以使用 pattern 属性来验证。
<Input label="邮件地址" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />自定义验证
你也可以使用自定义验证器来进行表单验证。
-- -------------------- ---- -------
----- -------- - -------- -- -
----- ------ - ---
-- ------------------ -
--------------- - ---------
-
------ -------
--
----- ----------------------- --------------------
---
-------validate 函数接收一个 values 参数，它包含了表单中所有的提交值。 validate 函数需要返回一个对象表示错误信息，键名为表单元素的名称。
表单值
@suchy/form-component 可以非常方便的获取表单中的输入值。
onChange
当表单元素的值改变时，@suchy/form-compnent会触发 onChange 事件，你可以使用 this.props.values 来得到表单当前的值。
handleChange = (values) => {
console.log(values);
};
<Form onChange={this.handleChange}>
...
</Form>onSubmit
当表单提交时，表单中所有输入的值都可以在 onSubmit 中得到。这是使用 <Form> 的主要方法。
handleSubmit = (values) => {
console.log(values);
};
<Form onSubmit={this.handleSubmit}>
...
</Form>结论
在前端开发中使用 npm 包 @suchy/form-component 将会非常方便，同时也能够显著提高开发效率。通过本文的介绍，希望能够对大家理解和使用该组件库起到一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006726a3660cf7123b36798