React-formal 是一个 React 表单库，它提供了一种简单方便的方式来管理 React 应用中的表单。不仅如此，它还支持局部验证，即在提交之前就能够判断是否合法，让用户更好地了解自己数据是否合理。
在这篇文章中，我将会向大家详细介绍如何起步使用 react-formal、如何创建表单、如何验证表单，以及如何让表单更加美观。此外还会包含相关代码的示例，帮助大家更好地理解如何使用 react-formal。
起步使用
要使用 react-formal 需要先安装它。可以通过 npm 或 yarn 来安装。
# 使用 npm 安装 npm install react-formal # 使用 yarn 安装 yarn add react-formal
当安装完成后需要导入 react-formal 的组件
import Form from 'react-formal';
到此为止，react-formal 就可以在你的项目中使用了!
创建表单
使用 react-formal 可以在简短时间内创建表单。以下代码展示了如何创建一个登录表单。
-- -------------------- ---- -------
------
-------
----
----------- --------------- ----------- --------------- --
--------
-------
---
----------- --------------- --------------- --------------- --
--------
------- -------------------------
-------这个表单非常简单，但是它包含了所有东西，可以让用户提交表单。现在我们可以通过添加事件处理程序来处理表单的提交事件。
<Form onSubmit={this.handleSubmit}>
{/* 表单项 */}
<button type="submit">登录</button>
</Form>上面的代码中的 handleSubmit 方法可以接收表单值，展示如下：
handleSubmit = values => {
// 在这里处理表单的值
console.log('表单提交的值：', values);
};这里的 values 就是表单提交的值，它被保存成一个对象。如果想要在表单提交时验证表单项，请看下一节内容。
验证表单
使用 react-formal 可以很方便地验证表单。我们可以通过在组件上添加 schema 属性来进行验证。以下代码展示了如何为 loginForm 创建一个简单的验证规则。
-- -------------------- ---- -------
------ --- ---- ------
----- ----------- - ------------
--------- ---
---------
-------------------
------- ---------------
--------- ---
---------
------------------
------- --------------
---
-- ---
----- ---------------------------- ---------------------
-------
----
----------- --------------- ----------- --------------- --
------------- -------------- --
--------
-------
---
----------- --------------- --------------- --------------- --
------------- -------------- --
--------
------- -------------------------
-------这里的 loginSchema 定义了一个规则，要求用户名和密码都不能为空，并且用户名需要至少3个字符，密码需要至少6个字符。接下来，你可以在表单提交成功或失败的时候调用 onSuccess 和 onError 回调来处理相应事件。
-- -------------------- ---- ------- ------------ - ------ -- - -- --------- ---------------------- -------- -- ----------- - ------ -- - ------------------------ -------- -- ------------- - -- -- - ------------------------- -- ----- ----- ---------------------------- -------------------- -------------------------- ------------------------------ - --- --- --- -------
美化表单
React-formal 非常灵活，可以使用任何 CSS 库来美化表单。而 react-bootstrap 是一个特别常用的组件库之一。
下面的代码展示了如何使用 react-bootstrap 来美化表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---------- ------------- ------------ ------ - ---- ------------------
----- ---------------------------- ---------------------
-----------
---------------------------------
------------ --------------- ----------- --------------- --
------------- -------------- --
------------
-----------
--------------------------------
------------ --------------- --------------- --------------- --
------------- -------------- --
------------
------- -------------------------
--------结论
React-formal 是一个非常有用的 React 表单库，它可以简化代码，提高效率，还支持局部验证，更加友好。本文介绍了 react-formal 的基本使用，包含创建表单，验证表单，美化表单等方面，希望能够帮助初学者快速了解并熟练掌握 react-formal 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196384