react-wild-form 是一个简单易用的 React 表单组件，它允许您使用非常少的代码创建表单并进行验证、提交和重置操作。在这篇文章中，我们将介绍如何使用该组件，包括如何安装、使用、配置和扩展。
安装
要使用 react-wild-form，您需要先安装它。您可以使用 npm 或 Yarn 安装。
如果您使用 npm，可以运行以下命令：
npm install react-wild-form
如果您使用 Yarn，可以运行以下命令：
yarn add react-wild-form
使用
要使用 react-wild-form，您需要在您的 React 应用程序中导入它。您还需要提供表单的字段和验证规则。以下是一个基本示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------------
------ ----- ------ - -- -- -
----- - ---------- -------------- ------ - - ---------
-------------- -
----- ---
------ ---
--
--------- ------ -- -
----- ------ - ---
-- -------------- -
----------- - ----- -- ----------
-
-- --------------- -
------------ - ------ -- ----------
- ---- -- ---------------------------------------------------------------- -
------------ - -------- ----- ---------
-
------ -------
--
--------- ------ -- -
---------------------------- ----- ----
--
---
------ -
----- ---------------
-----
------ ----------------------------
------ ----------- -------------------------- --
------
-----
------ ------------------------------
------ ------------ --------------------------- --
------
------- ------------- --------------------------------
-------
--
--这个组件会创建一个表单，其中包含两个字段： name 和 email。表单会在提交时执行 onSubmit 函数，而验证规则 validate 则会在用户填写表单时自动运行。如果 validate 函数返回了错误信息，将会显示在相关输入框下方的错误信息中。
配置
react-wild-form 支持许多配置选项，如果您需要更多的复杂功能，可以根据自己的需要进行调整。
初始值
您可以通过在 useForm 钩子中提供一个 initialValues 对象来设置表单的初始值。例如，如果您希望表单在加载时为空，则可以传递一个空对象 {}。如果您希望表单在加载时具有某些预设值，则可以提供一个包含这些值的对象。
const { formProps, getFieldProps } = useForm({
initialValues: {
name: 'John Doe',
email: 'john.doe@example.com',
},
// ...
});验证规则
您可以通过在 useForm 钩子中提供一个 validate 函数来设置表单的验证规则。validate 函数会在表单字段的值更改时自动触发。validate 函数应该返回一个与表单字段相同的对象，其中包含错误信息。如果返回的对象为空，则表明没有错误。
-- -------------------- ---- -------
----- - ---------- ------------- - - ---------
--------- ------ -- -
----- ------ - ---
-- -------------- -
----------- - ----- -- ----------
-
-- --------------- -
------------ - ------ -- ----------
- ---- -- ---------------------------------------------------------------- -
------------ - -------- ----- ---------
-
------ -------
--
-- ---
---提交
您可以通过在 useForm 钩子中提供一个 onSubmit 函数来处理表单提交事件。onSubmit 函数会在用户单击提交按钮时触发，并接收一个包含表单字段值的对象作为参数。
const { formProps, getFieldProps, submit } = useForm({
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
// ...
});重置
您可以通过使用 reset 方法来重置表单的值。该方法可以在 onSubmit 回调中使用，从而在表单提交后清除输入框中的值。如果您需要在页面上使用按钮来重置表单，请考虑将它们添加到某个按钮上的单击事件中，例如：
<button onClick={() => reset()}>Reset</button>字段数组
如果您需要一个动态的表单，您可以使用一个字段数组。在字段数组中，每个字段都由一个包含名称、类型、值、验证规则等信息的对象定义。以下是一个使用字段数组的示例：
-- -------------------- ---- -------
----- - ---------- -------------- ------ - - ---------
------- -
- ----- ------- ----- ------- ------------- --- --------- - -- --- -- ----- -- --------- --
- ----- -------- ----- -------- ------------- --- --------- - -- --- -- ------ -- --------- --
--
--------- ------ -- -
---------------------------- ----- ----
--
---处理函数
您可以在 useForm 钩子中提供一个 handle 对象来设置要在表单生命周期事件发生时调用的处理函数：
const { formProps, getFieldProps, submit } = useForm({
handle: {
onSubmit: (values, form) => console.log('Submitting', values, form),
onError: (errors, form) => console.log('Errors', errors, form),
},
});现在，不仅会在表单提交时调用 onSubmit 处理函数，还会在表单验证失败时调用 onError 处理函数。
自定义错误消息
您可以使用 setMessage 函数来自定义特定的错误消息。
-- -------------------- ---- -------
----- - ---------- - ---------- ------------- - - ----------
------------------ -- -- ------ --- ---- -- --- ---------
------------------- --- ------- -- -
-- ---- -
------ ------ --- ----- -- -----------
- ---- -- --------------- --- --- -
------ ------ --- ----- -- --- --------
-
---在表单外设置值
您可以在 React 应用程序的任何其他组件中设置表单字段的值。要实现这一点，您可以使用 useField 钩子来获取一个 value 和 setValue。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ------------------
----- --------- - -- -- -
----- - ------ -------- - - -----------------
------ -
------ ----------- ------------- ----------- -- ------------------------- --
--
--
----- ------ - -- -- -
------
---------- --
---
-------
--总结
在本文中，我们介绍了如何使用 react-wild-form，以及一些常见的配置选项。该组件提供了一个简单且易于使用的方式来创建表单，并减少了开发人员在表单验证、提交和重置方面的工作，从而减少了开发时间和错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f781e8991b448e0c1d