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のコンセプトは、 "構造化代入オブジェクトの割り当て" と呼ばれている：

この割り当て：

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は次のようになります。

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

Answer 2

あなたがreduxFormをエクスポートして、フォームの名前が含まれている必要があり、オブジェクト引数を与えるべきであるとに相当その後、

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

<MyComponent {...firstName} /> 

されますあなたのフォームの{... firstName}を使用することができます。それは `this.props.fields.firstName` https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operatorsから来たあなたは、自分のクラスの下

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