npm 包 redux-form 使用教程

在 React 应用中，表单是常见的组件之一。Redux 是一个很好的状态管理工具，但它并不适合处理表单数据。Redux-Form 是一个 Redux 插件，它提供了更好的方式来处理表单数据和验证。

本文将介绍如何使用 npm 包 redux-form，包括安装、配置和使用方法，并提供示例代码。

安装

可以使用 npm 或 yarn 安装 redux-form：

npm install redux-form

或者：

yarn add redux-form

配置

要使用 redux-form，你需要将其连接到 Redux 应用程序中。在 src 目录下新建一个 store.js 文件，并添加以下内容：

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

const rootReducer = combineReducers({
  // 其他 reducer...
  form: formReducer
})

const store = createStore(rootReducer)

export default store

在上面的代码中，我们导入 createStore 和 combineReducers 函数，以及 reducer 对象。然后，我们创建一个 rootReducer，其中包含一个名为 form 的属性，该属性由 formReducer 处理。最后，我们使用 createStore 函数创建一个 Redux store，并将 rootReducer 传递给它。

使用

现在我们已经将 redux-form 添加到应用程序中，接下来就可以使用它了。在这里，我们将展示一个简单的登录表单示例。

首先，在 src 目录下创建一个名为 LoginForm.js 的文件，并添加以下内容：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const LoginForm = props => {
  const { handleSubmit } = props

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">用户名：</label>
        <Field name="username" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="password">密码：</label>
        <Field name="password" component="input" type="password" />
      </div>
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'login'
})(LoginForm)

在上面的代码中，我们导入 React、Field 和 reduxForm。然后，我们定义了一个名为 LoginForm 的组件，它接受一个名为 handleSubmit 的属性。该组件包含一个包装在 form 标签中的表单，其中有两个 Field 组件，分别对应于用户名和密码输入框。最后，我们使用 reduxForm 函数将 LoginForm 包装起来，并将表单名称设置为 'login'。

接下来，在 src 目录下创建一个名为 LoginPage.js 的文件，并添加以下内容：

import React from 'react'
import { connect } from 'react-redux'
import LoginForm from './LoginForm'

const LoginPage = props => {
  const { handleSubmit } = props

  const onSubmit = values => {
    console.log(values)
  }

  return (
    <div>
      <h1>登录</h1>
      <LoginForm onSubmit={handleSubmit(onSubmit)} />
    </div>
  )
}

const mapStateToProps = state => ({})

export default connect(mapStateToProps)(LoginPage)

在上面的代码中，我们导入 React、connect 和 LoginForm。然后，我们定义了一个名为 LoginPage 的组件，它接受一个名为 handleSubmit 的属性。该组件包含一个标题和 LoginForm 组件。最后，我们使用 connect 函数将 LoginPage 连接到 Redux store 上。

示例演示

现在我们已经创建了一个简单的登录表单，可以在浏览器中查看它的工作方式。在 src 目录下创建一个名为 index.js 的文件，并添加以下内容：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32565) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/32565](https://www.javascriptcn.com/post/32565)