如何在材料ui中的列表项上设置点击监听器js

Question

我试图在material-ui的reactjs列表项上应用单击监听器。我已经设置如下onTouchTap它：

_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> 
    ); 
    } 
} 

当我点击ListItem则不会触发_handleListItemClick方法，而不是当我点击喜欢FlatButton和FloatingActionButton然后它会触发任何其他组件和打印控制台消息我在_handleListItemClick。

任何人都可以帮助我我在做什么错？

Answer 1

您需要分配给function事件onTouchTap和function将被调用，只要你点击了该项目，但你通过调用function（你不需要调用该函数）分配一个值，删除() 。

写像这样通过使用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'); 
}