Javascript 如何在react js中设置物料界面列表项的点击监听器

我正在尝试在

reactjs

中的

materialui

中的列表项上应用click listener。我已经为它设置了如下

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

\u rendertos（）{
返回此.state.todos.map（事件=>{
返回(
);
});
}
_handleListItemClick（项目）{
log（“单击！！”）；
}
render（）{
返回(
{
如果（ev.key==“输入”）{
this.handleCreateNote（）；
ev.preventDefault（）；
}
}}
/>
{this.\u renderTodos（）}
);
}
}

当我点击

ListItem

时，它不会触发

\u handleListItemClick

方法，相反，当我点击任何其他组件，如

FlatButton

和

FloatingActionButton

时，它会触发并在控制台上打印一条消息，我在

\u handleListItemClick

中有此消息

---

有人能告诉我我做错了什么吗？

您需要将

函数

分配给

onTouchTap

事件，并且每当您单击该项时，

函数

将被调用，但您通过调用该

函数

来分配值（您不需要调用该函数），删除

（）

使用

箭头函数

这样写：

<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(event){
   console.log('clicked');
}