Создание события onClick в React

Question

Я пытаюсь создать таблицу и отобразить некоторые строки с возможностью иметь «скрытую» строку.

Вот что я пытаюсь сделать:

var Child = React.createClass({ 
    render: function() { 
     return(
      <tr> 
       <td colSpan="8"> I am a child that can be hidden!</td> 
      </tr> 
     ) 
    } 
}) 


var CreateRows = React.createClass({ 
    getInitialState: function() { 
     return {childVisible: true} 
    }, 

    render: function(){ 
     var rows = this.props.people.map(function(row, i){ 
      return (
       <tr key={i} onClick={this.onClick}>  
        <td>{row['id']}</td> 
       </tr> 
       { 
        this.state.childVisible 
        ? <Child /> 
        : null 
       } 
      ) 
     }) 
     return (
      <tbody> 
       {rows} 
      </tbody> 
     ) 
    }, 

    onClick: function(){ 
     this.setState({childVisible: !this.setstate.childVisible}) 
    } 
}); 

Я звоню в другом компоненте CreateRows и посылая ему некоторые данные:

render: function(){ 
     return (
      <div> 
       <ChangeRowCount updatePeople = {this.updatePeople}/> 
       <table> 
        <CreateColumns columns={this.state.table_columns} /> 
        <CreateRows people = {this.state.people}/> 
       </table> 
      </div> 
     ) 
    } 

Я понимаю, что мой вопрос заключается в том, что когда я создаю переменная rows Я включаю функцию onClick(), но она не может «увидеть» ее и получить эту ошибку:

Uncaught (in promise) TypeError: Cannot read property 'onClick' of undefined(…)

Любые мысли о том, как я могу включить функцию onClick() для отображения/скрытия компонента Child?

Спасибо!

Answer 1

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

var rows = this.props.people.map(function(row, i){ 
     return (
      <tr key={i} onClick={this.onClick}>  
       <td>{row['id']}</td> 
      </tr> 
      { 
       this.state.childVisible 
       ? <Child /> 
       : null 
      } 
     ) 
    }, this) 

смотрите раздел из the documentationthisArg на карте функции