Redux 表单如何在渲染之前渲染一个数组字段？

Question

我正在尝试使用 ReduxForm 执行一个非常简单的示例，在渲染之前我有两个函数，但是其中一个函数调用另一个函数作为组件道具，但它是未定义的。我试着绑定了 this 但它仍然无法识别它。

这是我的代码：

import React, { Component } from 'react'
import { Field, FieldArray, reduxForm } from 'redux-form'

class Page4 extends Component {
  constructor(props) {
   super(props)
   this.simpleField.bind(this)
  }

  simpleField(field) {
  const { meta }  = field
  return (
    <div className='form-group'>
      <label>{field.label}</label>
      <input
        className='form-control'
        {...field.input}
      />
    </div>
  )
 }
  // This function cannot reach the simpleField component
  myFields(field) {
    let optiosArray = [
      {'label':'Option 1', 'value':'1'},
      {'label':'Option 2', 'value':'2'}
     ]
    return(
      optionsArray.map((option, key) => {
        <Field
          label= {option.label}
          value= {option.value}
          name={option.value}
          component={this.simpleField}
        />
      })
    )
  }

render() {
  return (
    <div>
      <FieldArray
        name='test'
        label='label'
        component={this.myFields}
      />
   </div>
  )  
 }
}

const validate = (value) => {
 const errors = ''
 return errors
}

export default reduxForm({
 validate,
 form: 'Page4'
})(Page4)

Answer 1

您确实绑定了错误的功能。您正在尝试在 myFields() 函数中访问 this。因此你必须绑定这个而不是 simpleField().

您必须在构造函数中绑定您的方法：

class Page4 extends Component {
    constructor(props) {
        super(props);
        this.myFields.bind(this);
    }

    myFields(...) {
        ....
    }
}

或者如果你使用babel和ES6，你可以使用箭头函数。这样就会自动绑定：

class Page4 extends Component {
    myFields = (field) => {
        ....
    };
}

不要在渲染周期中绑定函数，因为这意味着您将在每次渲染时创建一个新的回调。

Answer 2

要访问 this.simpleFields，在构造函数中绑定 this.myFields 就足够了。

 constructor(props) {
   super(props)
   this.myFields = this.myFields.bind(this)
  }

this.myFields = this.myFields.bind(this)

我认为您错误地使用了 FieldArray。我修改了代码，以便您了解应如何使用 FieldArray。在这里工作 jsFiddle - https://jsfiddle.net/sherin81/4u3hk7kg/

class Page4 extends Component {
  constructor(props) {
   super(props)
   this.myFields = this.myFields.bind(this)
  }

   simpleField = (field) => {
    const { input: { value } } = field
        return (
        <div className='form-group'>
          <input type="text" name={field.input.name} onChange={field.input.onChange} value={value} />  
        </div>
      )
 }

  myFields({ fields }) {
        return (<div>{fields.map((option, key) => {
        return (<div key={key}>
          <Field
            name={option}
            component={this.simpleField}
          />
        </div>)
      })}</div>)
    }

render() {
  return (
    <div>
      <FieldArray
        name='listOfTextFields'
        component={this.myFields}
      />
   </div>
  )  
 }
}

const validate = (value) => {
 const errors = ''
 return errors
}

const MyTextFields = reduxForm({
 validate,
 form: 'Page4'
})(Page4)

并且在调用组件时，你应该做以下事情。

<MyTextFields initialValues={{ listOfTextFields: [ 'Text 1','Text 2' ] }}/>

Redux 表单如何在渲染之前渲染一个数组字段？

How can the Redux form render a Field of Arrays before the render?

reactjs

redux

redux-form