npm 包 micro-form 使用教程

阅读时长 3 分钟读完

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

纠错
反馈