Не удается найти функцию в 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

Вы используете цикл 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(); } 
    }); 

Или установить простор для самого Foreach цикла как это было предложено 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> 
}