0 
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>

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

4

2 回答 2

4

您可能缺少的 ES6 概念称为“解构对象分配”：

本次作业：

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从哪里来的。

然后代码应用另一个新的 ES6 事物，称为“对象扩展运算符”：传递{...firstName}允许拆分firstName对象并将其每个属性单独传递给 React 组件。说，firstName看起来像这样：

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

然后

<MyComponent {...firstName} />

相当于

<MyComponent a={firstName.a} b={firstName.b} c={firstName.c} />
于 2016-04-12T22:22:37.587 回答
1

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

    export default SimpleForm({
       form: 'nameOfYourForm',
       fields: ['firstName', 'lastName']
    }, null, actions)(SimpleForm);
于 2016-10-28T10:12:44.013 回答