親関数を使用するためにどのように内部の反応マップ機能

Question

私は、これらの機能を使用していますMainコンポーネント内に続いて...次のコンポーネントに

<Main css={this.props.css} select={this.selectedCSS.bind(this)} save={this.saveCSS.bind(this)} /> 

を、以下の機能を渡している...

<h1>Select the stylesheet you wish to clean</h1> 
{ 
    this.props.css.map(function(style){ 

     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
       } 
      }) 
     } 

     </div> 
     <button className="cleanBtn" onClick={this.props.save}>Clean!</button> 

私のmap機能では、私はthis.props.select(style)を渡しています。これは親からの関数であり、私はそれにパラメータを渡そうとしています。しかし、私がこれを行うと、エラーが発生します...

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'props' of undefined 

他のすべての機能は動作します。私はすでにそれらをテストしました。実際には、コードが動作し、唯一の問題は、内部で関数を渡そうとするときです。mapこれの理由は何ですか？どうすれば修正できますか？

私は.bind(this)を追加しようとしましたが、無限ループで動作します。

Answer 1

問題は明示的に語らない限りArray.prototype.mapがthisコンテキストを結合しないことですに。

this.props.css.map(function(style) { 
    ... 
}, this) // binding this explicitly 

OR

this.props.css.map((style) => { // arrow function 
    ... 
}) 

OR

const self = this; 
this.props.css.map((style) => { 
    ... // access 'self.props.select' 
}) 

---

また、私はあなたのコードで別の問題を参照してください。 map内には、この

if (style) { 
    return (
     <div className="inputWrap"> 
      <input type="radio" name="style_name" onClick={this.props.select(style)}/> 
      <span>something</span> 
      <a key={style}>{style}</a> 
     </div> 
    );  
} 

ここinput要素がそのonClickのための機能を期待してやっている、しかし、あなたが実際に（それが何かを返すまったく場合）this.props.select(style)を呼び出し、その戻り値を渡すことによって、機能を評価していますonClick。代わりにこれを行う必要があります：

this.props.css.map((style) => { 
    if (style) { 
     return (
      <div className="inputWrap"> 
       <input type="radio" name="style_name" onClick={() => this.props.select(style)}/> 
       <span>something</span> 
       <a key={style}>{style}</a> 
      </div> 
     );  
    } 
}) 

Answer 2

マッピング機能では、thisは反応コンポーネントを指していません。

バインドコンテキストは手動は、この問題を解決するには：

{ 
    this.props.css.map(style => { 
     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
     } 
    }) 
} 

Answer 3

あなたが合格に述べた：

{ 
    this.props.css.map((function(style) { 
     if (style) { 
      return (<div className="inputWrap"><input type="radio" name="style_name" onClick={this.props.select(style)}/><span></span><a key={style}>{style}</a></div>) 
     } 
    }).bind(this)) 
} 

---

また、は、周囲の状況を維持するES6の矢印機能を、使用します親の関数を呼び出すときのパラメータ？ のonClickは、関数への参照を望んでいる（ただし、パラメータを渡す必要があることを認識）として、あなたは次のことを試みることができる：

onClick={() => { this.props.select(style) }}