npm 包 react-redux-simple-form 使用教程-JavaScript中文网-JavaScript教程资源分享门户

React-Redux-Simple-Form 是一个用于管理 React 表单状态的 npm 包。它能够快速简便的创建表单，并且通过 Redux 的状态管理能够方便地处理表单的各种操作和验证，提高了前端开发效率和表单性能。

安装和使用

要使用 React-Redux-Simple-Form ，您需要安装 React 和 Redux 以及其相关的 npm 包。您可以使用以下命令来安装：

npm install react-redux-simple-form

在您的 React 应用程序中，您需要使用以下代码导入 React-Redux-Simple-Form ：

import { SimpleForm, Field } from 'react-redux-simple-form';

使用以下代码创建一个简单的表单：

<SimpleForm initialValues={{ name: '', email: '', password: '', confirmPassword: '' }}>
  <Field name="name" type="text" label="Name" required />
  <Field name="email" type="email" label="Email" required />
  <Field name="password" type="password" label="Password" required />
  <Field name="confirmPassword" type="password" label="Confirm Password" required />
  <button type="submit">Submit</button>
</SimpleForm>

该表单定义了四个字段: name,email,password,confirmPassword,以及一个 submit 按钮，其中 Field 组件为表单元素创建输入字段，也可以用于输入类型为 radio,select,textarea 等表单元素。

使用 initialValues 属性为表单字段提供初始值。如果不提供 initialValues 属性，则表单将没有默认值.

表单验证

React-Redux-Simple-Form 提供丰富的表单验证方法。您可以使用 Field 组件指定要验证的表单元素，并定义验证规则。例如：

<Field
  name="email"
  type="text"
  label="Email"
  required
  validate={value => isEmail(value) ? true : 'Please enter a valid email address'}
/>

在此示例中，使用内置的 required 属性和自定义 validate 函数。如果验证失败，该函数需要返回一个字符串，该字符串更新验证错误并将其显示在表单上。

同时，组件还支持 isEqual，isInt，isLength 和其他许多验证器函数，这些函数都是从 validator.js 库中获得的。

表单状态管理

与其他 React-Redux 库一样，React-Redux-Simple-Form 也依赖于 Redux 存储数据。您可以使用任何 Redux 存储创建表单。将 simpleFormReducer 添加到 Redux 存储，就可以将其用作表单状态的处理程序。

使用以下示例代码将 SimpleForm 组件与 Redux 存储连接起来：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'react-redux-simple-form';

const rootReducer = combineReducers({
  form: formReducer
});

const store = createStore(rootReducer);

要在组件中访问表单状态，请使用 useFormState 钩子和 useFormSubmit 钩子。例如，以下代码片段处理提交表单:

-- -------------------- ---- -------
------ - ------------- ------------- - ---- --------------------------

----- ------ - -- -- -
  ----- - ------- -------- ------- - - ---------------
  ----- ---------- - ----------------

  ----- ------------ - ----- -- -
    -----------------------
    -- --------- -
      ------------------------- --------
    -
  --

  ------ -
    ----- ------------------------
      ------ ------------ ------------ ------------- -------- --
      ------- -----------------------------
    -------
  --
-

在此示例中，使用 useFormState 钩子获取表单状态，使用 useFormSubmit 钩子处理表单提交，当表单有效时限制提交.

总结

React-Redux-Simple-Form 可以帮助你更快的构建验证器表单，同时也提高了前端的开发效率和表单性能。通过本教程的学习，你将学会如何快速构建具有验证器的表单，并能够轻松的与 Redux 进行集成和管理表单状态.

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab698f