1. 什么是 micro-form?
micro-form 是一个基于 React 和 antd 封装的微型表单库,它主要提供了两个 API:
createForm(options)
:创建一个表单组件,需要传入一个配置对象。createFormItem(props)
:创建一个表单项组件,需要传入一个 props 对象。
这个库从数据结构和样式两个方面着手,使得表单的使用和开发更加方便和快捷。
2. 安装和使用
你可以通过 npm 包管理器直接安装它:
npm install micro-form
或者使用 yarn:
yarn add micro-form
安装后,你就可以在项目中使用了:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- -------------- - ---- ------------- ------ - ----- - ---- ------- ----- ------ - ------------ -------------- - --------- --- --------- --- -- ---------------- - -------------------- -- --- ----- ------- - ---------------- ------ ------ ----- ----------- ------ - - --------- ----- -------- --------- -- -- ---------- ------ ------- -------- ----- - ------ - -------- -------- -- --------- -- -
这个示例代码显示了如何使用 micro-form 完成一个验证用户名和密码的表单。我们使用了 antd 的 Input 组件作为表单项,在 MyInput 中通过配置 props 来完成表单项的创建,包括标签、表单项名、验证规则等。
3. 配置项说明
下面是 createForm 和 createFormItem 的详细配置说明:
3.1 createForm
initialValues
: 表单项的初始值,比如 { username: 'admin', password: '123456' }。onSubmit
: 表单提交后的回调函数。onChange
: 表单数据变化后的回调函数。validateMessages
: 自定义验证信息,比如 { required: '%s 必填' }。
3.2 createFormItem
label
: 表单项标签。name
: 表单项名。rules
: 表单项验证规则,是一个规则数组。getValueFromEvent
: 从事件中获取表单项的值,比如通过 event.target.value。
4. 总结
这篇技术文章讲解了如何使用 micro-form 库,以及它提供的一些简洁的 API,帮助大家完成前端表单的快速开发。虽然不是非常庞大的库,但是在我们实际的工作中,可以大大提高我们的开发效率和开发体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600568d181e8991b448e4903