javascript - 如何在react js中的material ui中的列表项上设置点击监听器

Question

我正在尝试在 reactjs 中的 material-ui 列表项上应用点击监听器。我已为其设置了 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

您需要为 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函数:

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