如何将 Redux-Form 绑定到表单的输入

2019-12-05 08:00:00 · 飞浪

介绍 React是一个功能强大的基于JavaScript的库，用于创建单页应用程序。每个应用程序都有一种方式来接受想要与应用程序交互的最终用户的用户输入。对于在React中管理表单，r

介绍

React 是一个功能强大的基于 JavaScript 的库，用于创建单页应用程序。每个应用程序都有一种方式来接受想要与应用程序交互的最终用户的用户输入。

对于在 React 中管理表单，react-redux是最广泛使用的软件包之一。它用于处理表单的各个方面，例如绑定表单元素、管理验证、提交表单等。

其他形式很难管理，但使用redux-form，我们可以通过将每个元素的值存储在状态中并提交以进行进一步操作来轻松维护输入的状态。

什么是 Redux-Form?

Redux-form 是用于高效管理表单的最佳软件包之一。它确保 HTML 表单使用 Redux 将所有信息存储到状态中。此外，它还有助于管理表单数据方面的准确性。

Redux-form 是一个库，更准确地说，它是一个高阶组件（HOC），用于在 Redux 存储中管理表单的状态。

但是 redux-form 并不像我们想象的那么简单。它还带来了管理表单初始化、验证和维护基本值的复杂性。

将 Redux-Form 与表单输入连接起来

要在 React 应用程序中使用 redux-form，您应该先了解一些概念：

React 基础知识
Redux Reducer formReducer
Redux HOC reduxForm()和<Field>组件来管理输入

这些是我们需要了解的术语，以便我们可以轻松地将 redux-form 配置到 React 中。让我们详细看看每个术语的描述。

formReducer()：formReducer 是一种管理来自表单组件的表单值更新的函数。formReducer ()的配置必须在应用程序的根 Reducer 中进行。
reduxForm()：reduxForm()是主要函数，是一种接受组件名称作为参数的高阶组件。它用于管理用户与 Redux 调度操作的交互。它始终在我们创建表单的组件中以及不同的字段中进行配置。
Field：这是一种包裹在表单组件内部的组件，最重要的是，每个表单元素都会考虑表单的<Field>来定位元素变化。

这些是在我们的应用程序中配置和使用 redux-form 的支柱。乍一看可能看起来很复杂，但是当你习惯了它时，在 React 中实现 Redux 表单会很有趣。

让我们跳到一个逐步的示例，其中我们将配置一个简单的表单以及验证。

首先，创建一个简单的 React 应用程序后，我们需要安装一些依赖项。命令如下。

      npm install redux react-redux redux-thunk redux-form

存储和 Redux-Form 配置

安装完上述所有依赖项后，我们必须创建存储并在名为index.js的根文件中使用<Provider>，如下所示：

      import { createStore, applyMiddleware, combineReducers } from 'redux';
// the formReducer () function
import { reducer as formReducer } from 'redux-form';

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

这里我们使用了formReducer()，它用于将任何表单提供给应用程序，因此它只是一次性配置。

然后我们需要创建存储并将其提供给整个应用程序，以便数据在各个组件之间同步，如下所示：

      const store = createStore(rootReducer, applyMiddleware(thunk));

render(
  <Provider store={store}>
   <App />
  </Provider>,
  document.getElementById('root')
);
    

在此代码片段中，我们使用createStore ()函数创建了一个存储，它接受应用程序的根 Reducer，我们也在其中配置了 formReducer。

通过进行此配置，我们将能够在我们的应用程序中使用表单，并且数据将与来自表单组件的更改同步。

index.js文件的最终源代码如下所示：

      import React, { Component } from "react";
import { render } from "react-dom";
// Our simple form
import SimpleForm from "./SimpleForm";
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware, combineReducers } from 'redux';
// the formReducer() function
import { reducer as formReducer } from 'redux-form';

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

const store = createStore(rootReducer, applyMiddleware(thunk));

class App extends Component {

  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <SimpleForm />
      </div>
    );
  }
}

render(
  <Provider store={store}>
    <App />
  </Provider>,

  document.getElementById('root')
);
    

我们已经完成了根组件配置以及应用程序中的单一真实来源（存储配置）。

表单组件

之前，我们创建了 store 并使用了 formReducer，当表单组件发生更改时，它会更新 store。但为此，我们需要在应用程序中配置 redux-form。

我们来创建一个名为SimpleForm.jsx的新组件，并配置reduxForm()方法，如下所示：

      import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

class SimpleForm extends Component {

  render() {
    const { handleSubmit, reset, pristine, submitting, valid } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(values => console.log(values))}>
            // Actual form fields
        </form>
      </div>
    );
  }
}

export default reduxForm({
  form: "SimpleForm",
})(SimpleForm);
    

让我们仔细看看到目前为止我们在此表单组件中所做的基本表单配置。

reduxForm() 复制代码

正如我们前面讨论过的，reduxForm()函数是一个高阶组件（HOC），它接受组件并根据与表单元素的交互返回更新的组件。

在此函数中，我们为表单以及表单组件提供了一个唯一的名称，即 SimpleForm。使用该 HOC 后，我们现在将能够访问 Redux 表单的不同属性，例如 handleSubmit、submitting、pristine 等。

处理提交（）

再次强调，这是无错误提交表单的函数。可以从reduxForm()组件通过 props 访问该函数。

handleSubmit ()用于将字段的数据提交给表单 Reducer，如果表单包含必需且有效的值，reduxForm()高阶组件将返回处理后的数据。

创建通用输入控件

创建表单后，我们应该在其中拥有不同的表单控件，以便我们可以创建控件，有点像下面给出的源代码。

      <Field type="text" />

或者，我们可以创建一个通用的表单输入，以便它可以与 <Field> 一起重复使用。

让我们创建一个名为InputControl.js的新文件并粘贴以下源代码行。

      import React, { Component } from "react";

export const input = ({
  input,
  type,
  placeholder,
  id,
  meta: { touched, error },
  ...rest
}) => {

  return (
	 <div>
      <input {...input} type={type} placeholder={placeholder} id={id} />
      {touched && error && (
       <span style={{ fontSize: "10px", color: "red" }}>{error}</span>
      )}
    </div>
  );
};
    

上面的例子只是一个简单的文件，我们将在其中传递不同的属性，这些属性对于<Field>控件的输入很有用，我们将在实际的表单组件中使用这些属性。

现在让我们通过<Field>来使用该通用输入控件， SimpleForm.jsx的完整源代码将如下所示：

      import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import { input } from "./InputControl";

class SimpleForm extends Component {

  render() {
   const { handleSubmit, reset, pristine, submitting, valid } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(values => console.log(values))}>
          <table>
            <tr>
             <td>
                <label>First Name :</label>
              </td>
              <td>
                <Field
                  name="firstName"
                  type="text"
                   component={input}
                  id="first-name"
                  placeholder="enter your first name"
                />
              </td>
            </tr>
            <tr>
               <td>
                <label>Last Name :</label>
              </td>
              <td>
                <Field
                  name="lastName"
                  type="text"
                  component={input}
                  id="last-name"
                  placeholder="enter your last name"
                />
              </td>
            </tr>
            <tr>
              <td>
                <label>Email Address :</label>
              </td>
              <td>
                <Field
                  name="email"
                  type="text"
                  component={input}
                  id="email"
                  placeholder="enter your email"
                />
              </td>
            </tr>
            <tr>
              <td>
                <button
                  type="submit"
                  disabled={!valid || pristine || submitting}
                \>
                  Submit
                </button>
              </td>
              <td>
                <button type="button" onClick={reset}>
                  reset
                </button>
              </td>
            </tr>
          </table>
        </form>
      </div>
    );
  }
} 

export default reduxForm({
  form: "SimpleForm",
})(SimpleForm);
    

让我们详细看一下这个表单组件。

首先，我们有一个通用输入控件的导入语句。
然后我们使用<Field>，它将每个表单输入连接到存储。
与<Field>一起，我们将组件用作之前创建的“输入”。
根据表单活动，我们将能够根据三个条件禁用按钮：
- 如果表格无效
- 如果表单正在提交
- 如果表单元素的值尚未改变
表单值有效后，字段值的对象将从 redux-form 的 HOC 返回。

正如您在上面的例子中看到的，我们使用了三个不同的字段来表示名字、姓氏和电子邮件，现在我们已经完成了简单的示例。

要检查表单是否按预期工作，请运行此应用程序并查看差异。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何将 Redux-Form 绑定到表单的输入

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { createStore, applyMiddleware, combineReducers } from 'redux'; // the formReducer () function import { reducer as formReducer } from 'redux-form'; const rootReducer = combineReducers({ form: formReducer });

import React, { Component } from "react"; import { render } from "react-dom"; // Our simple form import SimpleForm from "./SimpleForm"; import { Provider } from 'react-redux'; import thunk from 'redux-thunk'; import { createStore, applyMiddleware, combineReducers } from 'redux'; // the formReducer() function import { reducer as formReducer } from 'redux-form'; const rootReducer = combineReducers({ form: formReducer }); const store = createStore(rootReducer, applyMiddleware(thunk)); class App extends Component { constructor() { super(); this.state = { name: "React" }; } render() { return ( <div> <SimpleForm /> </div> ); } } render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

import React, { Component } from "react"; import { reduxForm, Field } from "redux-form"; class SimpleForm extends Component { render() { const { handleSubmit, reset, pristine, submitting, valid } = this.props; return ( <div> <form onSubmit={handleSubmit(values => console.log(values))}> // Actual form fields </form> </div> ); } } export default reduxForm({ form: "SimpleForm", })(SimpleForm);

import React, { Component } from "react"; export const input = ({ input, type, placeholder, id, meta: { touched, error }, ...rest }) => { return ( <div> <input {...input} type={type} placeholder={placeholder} id={id} /> {touched && error && ( <span style={{ fontSize: "10px", color: "red" }}>{error}</span> )} </div> ); };

import React, { Component } from "react"; import { reduxForm, Field } from "redux-form"; import { input } from "./InputControl"; class SimpleForm extends Component { render() { const { handleSubmit, reset, pristine, submitting, valid } = this.props; return ( <div> <form onSubmit={handleSubmit(values => console.log(values))}> <table> <tr> <td> <label>First Name :</label> </td> <td> <Field name="firstName" type="text" component={input} id="first-name" placeholder="enter your first name" /> </td> </tr> <tr> <td> <label>Last Name :</label> </td> <td> <Field name="lastName" type="text" component={input} id="last-name" placeholder="enter your last name" /> </td> </tr> <tr> <td> <label>Email Address :</label> </td> <td> <Field name="email" type="text" component={input} id="email" placeholder="enter your email" /> </td> </tr> <tr> <td> <button type="submit" disabled={!valid || pristine || submitting} \> Submit </button> </td> <td> <button type="button" onClick={reset}> reset </button> </td> </tr> </table> </form> </div> ); } } export default reduxForm({ form: "SimpleForm", })(SimpleForm);