Вызов функции компоненты из функции в Reactjs

Question

У меня есть компонент, который выкладывается как это:

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

Я хотел бы иметь возможность запускать функцию onButtonClick внутри переменной entryList в визуализации но я не могу понять, как это сделать. При запуске консоли консоль говорит, что onButtonClick не определен.

Uncaught ReferenceError: onButtonClick is not defined 

Как я могу «сбежать» от функции? Я думаю, что this.props.data.map(function(items) {}); что усложняет проблему, потому что я могу получить доступ к нему просто отлично от того, если я перейду на кнопку, как этого

 // returns the html of the component 

     return (
      <div className="entryList"> 
       <a onClick={this.onButtonClick} className="btn right">go</a> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

Спасибо за вашу помощь!

Answer 1

Причина ваш код не работает так, как вы ожидаете, что это происходит потому, что контекст this изменения внутри анонимной функции передается map. map принимает необязательный второй параметр, который представляет значение this, которое будет использовать обратный вызов. Поэтому просто добавление this в качестве второго аргумента в map решит вашу проблему.

var entryList = this.props.data.map(function(entry) { 
    ... 
}, this); 

Разработчики, которые используют ES2015 можно также использовать функцию стрелки, чтобы автоматически связать правильный контекст this.

var entryList = this.props.data.map(entry => { 
    ... 
}); 

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Контекст меняется. Поэтому вы можете это сделать.

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var self = this; 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={self.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

или просто

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={this.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     },this); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
});