リスポンスjsの素材uiのリストアイテムにクリックリスナーを設定するには

Question

material-uiのリストアイテムにクリックリスナーを適用しようとしています。reactjsです。私は以下のようにそれのためにonTouchTapを設定している：私はFlatButtonとFloatingActionButtonそれが引き金のような他のコンポーネントをクリックすると、コンソールにメッセージを印刷するとき

_renderTodos() { 
    return this.state.todos.map(event => { 
     return (
     <ListItem 
      primaryText={event.text} 
      key={event.id} 
      style={{ width: "100%", textAlign: "center" }} 
      onTouchTap={this._handleListItemClick(event)} 
     /> 
    ); 
    }); 
    } 

    _handleListItemClick(item) { 
    console.log("Clicked!!"); 
    } 

render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      <AppBarTest /> 
      <FloatingActionButton 
      style={styles.fab} 
      backgroundColor={colors.blue_color} 
      onTouchTap={this.handleOpen} 
      > 
      <ContentAdd /> 
      </FloatingActionButton> 
      <Dialog 
      open={this.state.open} 
      onRequestClose={this.handleClose} 
      title={strings.dialog_create_note_title} 
      > 
      <TextField 
       name="notetext" 
       hintText="Note" 
       style={{ width: "48%", float: "left", height: 48 }} 
       defaultValue={this.state.noteVal} 
       onChange={this.handleChange} 
       onKeyPress={ev => { 
       if (ev.key === "Enter") { 
        this.handleCreateNote(); 
        ev.preventDefault(); 
       } 
       }} 
      /> 

      <div 
       style={{ 
       width: "4%", 
       height: "1", 
       float: "left", 
       visibility: "hidden" 
       }} 
      /> 

      <FlatButton 
       label={strings.create_note} 
       style={{ width: "48%", height: 48, float: "left" }} 
       onTouchTap={this.handleCreateNote} 
      /> 
      </Dialog> 

      <List style={{ margin: 8 }}> 
      {this._renderTodos()} 
      </List> 

     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

は、ときに私の代わりに、それは_handleListItemClickメソッドをトリガしませんListItemをクリックしてください私が持っているのは_handleListItemClickです。

私は何をしているのですか？あなたはfunctiononTouchTapにイベントを割り当て、（あなたがその関数を呼び出す必要はありません）あなたは、その項目をクリックするたびにfunctionが呼び出されますが、あなたがfunctionことを呼び出して値を代入していること、()を削除する必要が

Answer 1

。

arrow functionを使用して、このようにそれを書く：

<ListItem 
    primaryText={event.text} 
    key={event.id} 
    style={{ width: "100%", textAlign: "center" }} 
    onTouchTap={(event) => this._handleListItemClick(event)} 
/> 

それとも別の方法：

<ListItem 
    primaryText={event.text} 
    key={event.id} 
    style={{ width: "100%", textAlign: "center" }} 
    onTouchTap={this._handleListItemClick.bind(this)} 
/> 

_handleListItemClickは機能：

_handleListItemClick(event){ 
    console.log('clicked'); 
}