Redux 表单变量

Question

import React, { Component, PropTypes } from 'react'
import { reduxForm } from 'redux-form'
export const fields = [ 'firstName', 'lastName', 'email', 'sex', 'favoriteColor', 'employed', 'notes' ]

class SimpleForm extends Component {
  render() {
    const {
      fields: { firstName, lastName, email, sex, favoriteColor, employed, notes },
      handleSubmit,
      resetForm,
      submitting
      } = this.props
    return (<form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <input type="text" placeholder="First Name" {...firstName}/>
          </div>
        </div>
        <div>
          <label>Last Name</label>
          <div>
            <input type="text" placeholder="Last Name" {...lastName}/>
          </div>
        </div>
        <div>

这是来自 redux-form 包的 Simple Form 示例。我很困惑变量 firstName 是从哪里来的。我在 ES6 语法中遗漏了什么吗？

Answer 1

您可能缺少的 ES6 概念称为 "destructuring object assignment":

这个作业：

const {
  fields: { firstName, lastName, email, sex, favoriteColor, employed, notes },
  handleSubmit,
  resetForm,
  submitting
  } = this.props

表示this.props的形状是

{ fields: { firstName: "...", 
            lastName: "...", 
            email: "...", 
            sex: "...", 
            favoriteColor: "...", 
            employed: "...", 
            notes: "..."
          },
  handleSubmit: "...",
  resetForm: "...",
  submitting: "..."
}

其中“...”代表任何数据类型（包括对象和数组），而不仅仅是字符串。此外，该对象可能包含更多信息。

解构分配允许深入到对象结构并为该对象的元素分配名称。在我们的例子中，我上面勾勒的每个“...”值都直接分配给一个变量。这些变量随后可以单独使用。这就是 firstName 的来源。

代码然后应用另一个名为 "object spread operator" 的新 ES6 事物：传递 {...firstName} 允许拆分 firstName 对象并将其每个属性分别传递给 React 组件. 比如说，firstName 看起来像这样：

{ a: "...", b: "...", c: "..." }

然后

<MyComponent {...firstName} />

等同于

<MyComponent a={firstName.a} b={firstName.b} c={firstName.c} />

Answer 2

你应该导出 reduxForm 并提供一个对象参数，其中应该包含表单的名称和表单的字段，然后你可以在表单中使用 { ...firstName} 。您应该将此代码添加到 class

的底部

    export default SimpleForm({
       form: 'nameOfYourForm',
       fields: ['firstName', 'lastName']
    }, null, actions)(SimpleForm);

Redux 表单变量

Redux Form Variables

reactjs

redux

redux-form