がreactjs

Question

で関数を見つけることができません私はCannot read property 'clickHandler' of undefined

var FilterableProductTable = React.createClass({ 
     render: function() { 
      var rows = []; 
      this.props.products.forEach(function(product) { 
       if(product.Control == "" || product.Control == undefined) { 
        rows.push(<tr colSpan = "2" key = {product.Field}><th>{product.Field}</th><td></td></tr>); //rows.push(< ProductHeader product = { product } key = { product.Field } />); 
       } 
       else {       
        var ControlTag; 
        if(product.Control == "textarea") { 
         ControlTag = <span><textarea rows="4" cols="18" id={ product.id } title={ product.id }></textarea><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
        } 
        else if(product.Control == "select") { 
         ControlTag = <span><select style={{width: '60%'}} id={ product.id } title={ product.id }><option></option></select><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
        } 
        else { 
         ControlTag=<span><input type="text" id={ product.id } title={ product.id }/><i className="fa fa-pencil changeSetting" title="Change control"></i></span> 
        } 
       rows.push(<tr colSpan = "2" key = {product.Field}><th>{product.Field}</th><td onClick={ this.clickHandler }>{ControlTag}</td></tr>);       // rows.push(< ProductRow product = { product } key = { product.Field } />); 
       } 
      });     
      return (<table className={'tagsTable'}><tbody>{rows}</tbody></table>) 
     }, 
     clickHandler: function(e){ alert(); } 
    }); 

のエラーを取得していたコードで不足している何かがあるのでしょうか？

Answer 1

ループごとにthisが使用されているため、ループ内にはコンポーネント自体はありません。 foreachループ自体の

var FilterableProductTable = React.createClass({ 
     render: function() { 
      var rows = []; 
      var self = this; // <== new code 
      this.props.products.forEach(function(product) {    
       // bunch of code..  
       // changed click to onClick={ self.clickHandler } 
       rows.push(<td onClick={ self.clickHandler }>{ControlTag}</td>); 
       // bunch of code.. 
      }); 
     }, 
     clickHandler: function(e){ alert(); } 
    }); 

または設定範囲Alexander T.によって示唆されているように確かに私は

var FilterableProductTable = React.createClass({ 
     render: function() { 
      var rows = []; 
      this.props.products.forEach(function(product) {    
       // your code, without any modification 
      }, this); // <== notice: this 
     }, 
     clickHandler: function(e){ alert(); } 
    }); 

Answer 2

上記の溶液よりも良いそれが好き、thisはforEachの関数内で使用されているので、それはですので、この関数を参照あなたのReactコンポーネントではありません。この小さなJSトリックを使用してください：

var self = this; 

this.props.products.forEach(function(product) { 
    <td onClick={ self.clickHandler }></td> 
}