1. 什么是 micro-form？
micro-form 是一个基于 React 和 antd 封装的微型表单库，它主要提供了两个 API：
createForm(options)：创建一个表单组件，需要传入一个配置对象。createFormItem(props)：创建一个表单项组件，需要传入一个 props 对象。
这个库从数据结构和样式两个方面着手，使得表单的使用和开发更加方便和快捷。
2. 安装和使用
你可以通过 npm 包管理器直接安装它：
--- ------- ----------
或者使用 yarn：
---- --- ----------
安装后，你就可以在项目中使用了：
------ ----- ---- --------
------ - ----------- -------------- - ---- -------------
------ - ----- - ---- -------
----- ------ - ------------
-------------- -
--------- ---
--------- ---
--
---------------- -
--------------------
--
---
----- ------- - ----------------
------ ------
----- -----------
------ -
-
--------- -----
-------- ---------
--
--
----------
------ ------- -------- ----- -
------ -
--------
-------- --
---------
--
-这个示例代码显示了如何使用 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