Reduxフォームはレンダリングの前にField of Arraysをどのようにレンダリングできますか？

Question

私はReduxFormで非常に簡単な例を実行しようとしていますが、レンダリング前に2つの関数がありますが、関数の1つがコンポーネントの小道具として別の関数を呼び出しますが、それは未定義です。私はこれをバインドしようとしましたが、それはまだそれを認識しません。あなたが間違った機能を結合しなかった

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

this.simpleFieldsにアクセスするには、this.myFieldsをコンストラクタにバインドするだけで十分です。

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

this.myFields = this.myFields.bind（この）

私はあなたが間違って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' ] }}/> 

Answer 2

：

は、ここに私のコードです。 myFields()機能でthisにアクセスしようとしています。したがって、あなたはsimpleField()ではなく、この1つをバインドする必要があります。

あなたは、コンストラクタであなたのメソッドエーテルをバインドする必要があります。

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

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

か、バベルとES6を使用している場合、あなたは矢印の機能を使用することができます。この方法で自動的にバインドされます：

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

レンダリングサイクルで関数をバインドしないでください。これは、すべてのレンダリングで新しいコールバックを作成することを意味するためです。