輔助變換形式變量

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語法中遺漏的東西？輔助變換形式變量

來源

2016-04-12 Maximus S

它來自'this.props.fields.firstName' https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators底部/ Destructuring_assignment – zerkms

你可能會丟失的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-12 22:22:37 Nicole

我得到'fields.firstName'從最初的'const'賦值映射到'this.props.fields.firstName'。但是...... firstName'如何到達'fields.firstName'？ –

我已經更新了我的答案 - 它是否回答你的問題？ – Nicole

並不是說'fields.firstName'映射到'this.props.fields.firstName'，但實際上'firstName'已經映射到'this.props.fields.firstName' - 它深深地解構了對象。 – Nicole

，你應該導出reduxForm，並給它應該包含以下形式的名稱的對象參數，您的表單中的字段，那麼您可以在表單中使用{... firstName}。您應該將此代碼添加到您的類

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

來源

2016-10-28 10:12:44 tsinat

輔助變換形式變量

回答

相關問題