我不能在我的 React 组件中传递 onClick 事件?

I cannot pass an onClick event in my react component?

我正在尝试使用此代码中的中继改变我的组件,但我不知道为什么我不能将 onClick 事件放在列表中

  handleSubmit = (e) => {
    e.preventDefault();
    Relay.Store.commitUpdate(
      new createTodoMutation({
        text: this.refs.textForNewTodo.value,
        store: this.props.store
      })
    );
    this.refs.textForNewTodo.value="";
  }
  handleOnClick = (id) => {
    id.preventDefault();
    Relay.Store.commitUpdate(
      new toggleTodoStatus({
        id: id,
        store: this.props.store
      })
    );
  }
  render() {
    let todolist = this.props.store.todoConnection.edges.map((edge) => {
      return (
        <li key={edge.node.id} onClick={this.handleOnClick(edge.node.id)}>
          <p>{edge.node.text}</p>
        </li>
      );
    });
    return (
      <div>
        <h3>Todos</h3>
        <form onSubmit={this.handleSubmit} >
          <input type="text" placeholder="Todo text" ref="textForNewTodo" />
          <button type="submit">Add</button>
        </form>
        Showing: &nbsp;
        <select onChange={this.setLimit} defaultValue={this.props.relay.variables.limit}>
          <option value="5">5</option>
          <option value="10">10</option>
        </select>
        <ul>
          {todolist}
        </ul>
      </div>
    );

handleSubmit 正在运行,但列表上的 handleOnClick 不起作用,我遇到此错误 "Uncaught TypeError: Cannot read property 'id' of undefined" 但我在 onClick={this.handleOnClick(edge.node.id)}。我看不出这段代码有什么问题。有帮助吗?

这是传递 onClick 事件的错误方式。当您执行 onClick={this.handleOnClick(edge.node.id)} 时,该事件只会在渲染期间调用一次。

尝试onClick={() => this.handleOnClick(edge.node.id)}

在你的例子中,你在每次渲染后立即调用 handleOnClick,而不是将其传递给 onClick 以便它可以调用每当您单击该元素时它。

由于您需要将参数传递给您的函数,因此您不能简单地将函数传递给 onClick

<... onClick={this.handleOnClick} />

因此,要解决此问题,您可以创建一个箭头函数并将箭头函数传递给 onClick

<... onClick={() => this.handleOnClick(edge.node.id)} />

你也不需要 id.preventDefault();再