辅助变换形式变量

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

辅助变换形式变量

回答

相关问题