これをマップ内の関数にバインドする

Question

私はマップ関数を使用しており、マップ関数内でこれが必要に応じてクラスオブジェクトを参照していることをテストして確認しました。

これをjsx関数にバインドして再度渡すと、必要に応じて渡されません。

エラー：キャッチされない例外TypeError：。_this3.checkType（...）バインドが機能

// wrapped in a class 

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) { 

     console.log(this); 

     switch(type) { 
      case 'select': 
       return <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select> 
       break; 
      case 'text': 
       return <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" /> 
       break; 
      case 'date': 
       return <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="date" /> 
       break; 
      default: 
       console.log('Error: Invalid Type'); 
     } 
     return type === 'select' ? <select></select> : <input /> 
    } 

return(
     <div className="formwrapper thinshadow">  
      <h3>{this.props.header}</h3> 
      {this.getFields().map((field, i) => { 
       <div key={i} className={field.classes}> 
        {this.checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index).bind(this)} 

                    // DOES NOT WORK^

        <div className="minilabel"></div> 
       </div> 
      }, this)}           // THIS WORKS 

      <button className="btn btn-primary" 
        onClick={() => this.props.onClick(values)} > 
        Save 
      </button> 
     </div> 
    ); 

Answer 1

あなたはそれを結合するのではなく、機能を呼び出しているではありません。

this.checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index).bind(this) 

でなければなりません

this.checkType.bind(this, field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index) 

bind

fun.bind(thisArg[, arg1[, arg2[, ...]]] 

は、詳細については、このリンクを参照してください使用方法：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

編集

あなたは別のコンテキスト（ほとんど別のthis）にあなたの関数を渡しているときbindを使用し、まだ機能は、元thisの下で呼び出すことにしたいです。

あなたの状況では、map内に同じthisがあるため、バインドする必要はありません。 You Don't Need to Bind This in React when using forEach and mapを参照してください。

しかし、したい場合は、反復処理中にbindを送信することを強くお勧めします。クロージャと、反復の前にbindを使用することができます。

bind is slowでも、ほとんどの時間は問題ありません。しかし、もっと重要なことに、forEachやmapのような反復ではbindにしたくないのです。（Reactを使用していないときに）わからなくてもコンテキスト（this）を失いやすいからです。そして、あなたは数時間頭を引っ掻くでしょう。

リアクトを使用している場合は、renderの機能でbindを使用できます。

render:() { 
    const checkType = this.checkType.bind(this); 
    render (
    map((node) => { checkType(...) }); 
); 
}