前言
在 React 应用开发中，有很多场景需要处理表单数据。而管理表单数据包括表单显示、表单验证、表单提交等任务，又会让我们面临很多的挑战。为了解决这些问题，一些成熟的方案随着时间的推移也被提出，其中一个比较优秀的解决方案就是利用 Mobx 做表单数据管理。而 react-mobx-form 就是基于此方案的，旨在为开发者提供表单逻辑的流程化规范，让表单的开发更加便捷。
本文将会对于 react-mobx-form 的使用做详细的介绍，让读者能够掌握其应用的关键。
安装
首先我们要做的是安装这个包。打开你的终端，并进入你的 React 工程中，然后在终端中输入下面的命令：
npm install --save react-mobx-form
一般情况下，安装完成后，你就可以在你的项目中使用了。
使用
初始化
在使用 react-mobx-form 之前，我们需要首先将表单数据声明成一个 Javascript 对象。我们称此代码中的对象为 Form 对象。
为了方便展示，我们先定义一个 Form 对象。
-- -------------------- ---- -------
----- ----------- - -
------ -
------ ---
------ --------
------ --------------------------------------
--
--------- -
------ ---
------ -----------
------ -------------------------------
--
--对于每一个 input，都包含以下属性：
- value 表示 input 的值
- label 表示 input 的标签名称
- rules 表示这个 input 的验证规则。可以使用 Laravel 的 Validation 规则，或者以 pipe
|连接的字符串
组件渲染
我们来创建一个 react-mobx-form，组件非常简单：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ - ---------- - ---- ------------------
----- --------- - ---------------- -- -
----- - ---- - - ------
------ -
-----
----- -------------------------
-----
--------------------------------------
------ --------------------------- --
------------------------------------------
------
-----
-----------------------------------------
------ ------------------------------ --
---------------------------------------------
------
------- -----------------------------
-------
------
--
---
------ ----- ------------------ - ------------
----- ------------
--------------首先，我们用 import 引入 createForm 和 observer：
import { observer } from 'mobx-react-lite';
import { createForm } from 'react-mobx-form';接着，我们定义 LoginForm 组件。记得要用 observer 包裹，以便观察 state 变化并在需要的时候更新视图。
LoginForm 组件接收一个 props： form。然后我们用 form.$('fieldName') 来绑定每一个 input 属性。它包含以下三个属性：
label表示 input 的标签名称bind表示绑定 input 属性，例如 onChange 和 valueerror.message当 input 不合法的时候，显示的错误信息。
最后，我们用 createForm() 高阶组件将 Form 对象化。此时，LoginForm 可以访问到 Form 对象的相关属性。
表单验证
一般情况下，我们需要仅在用户提交表单时验证。为了实现这一点，我们可以在提交表单时触发表单的验证。我们只需要将相应的方法关联在表单的 onSubmit 事件上即可。
...
<form onSubmit={this.onSubmit}>
...准确来说，这里的 this 不会指向到当前组件，因为我们只是从上面的 props 中引用了 form。所以我们需要在 onSubmit 方法中签名添加箭头函数，以保证正确的 this 指向。
-- -------------------- ---- -------
-------- - --- --------------------------------- -- -
----- - ---- - - -----------
-------------------
-------------
---------- ------ -- -
---------------------------
--
-------- ------ -- -
----------------- -------- ---------------
--
---
--我们可以在 onSuccess 回调中访问表单的值。如果需要在 onSuccess 回调函数中调用父组件的方法，可以使用下面的代码来实现：
onSuccess={(form) => {
const { onSubmit } = this.props;
onSubmit(form.values());
}}错误信息可以在 form.errors() 中得到。
代码演示
完整示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ - ---------- - ---- ------------------
----- ----------- - -
------ -
------ ---
------ --------
------ --------------------------------------
--
--------- -
------ ---
------ -----------
------ -------------------------------
--
--
----- --------- - ---------------- -- -
----- - ---- - - ------
----- -------- - --- --------------------------------- -- -
----- - ---- - - ------
-------------------
-------------
---------- ------ -- -
---------------------------
--
-------- ------ -- -
----------------- -------- ---------------
--
---
--
------ -
-----
----- --------------------
-----
--------------------------------------
------ --------------------------- --
------------------------------------------
------
-----
-----------------------------------------
------ ------------------------------ --
---------------------------------------------
------
------- -----------------------------
------- -------------------------------------
-------
------
--
---
------ ----- ------------------ - ------------
----- ------------
--------------总结
至此，我们已经学习了 react-mobx-form 的基本用法。我们可以使用它来简化表单数据处理，同时提供一致的验证规范。相较于传统的表单处理方式，react-mobx-form 的优势是明显的，它可以使表单处理更加简单、快捷和规范。希望读者可以通过本文的介绍，更好地了解和使用 react-mobx-form。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac6732a