我无法在我的反应组件中传递 onClick 事件？答案

【问题标题】：I cannot pass an onClick event in my react component?我无法在我的反应组件中传递 onClick 事件？
【发布时间】：2017-02-17 06:36:06
【问题描述】：

我正在尝试在此代码中使用中继更改我的组件，但我不知道为什么我不能将 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 不是，我遇到此错误“未捕获的类型错误：无法读取未定义的属性 'id'”但我在 onClick={this.handleOnClick( edge.node.id)}。我看不出这段代码有什么问题。帮忙？

【问题讨论】：

标签： reactjs relayjs

【解决方案1】：

这是传递onClick 事件的错误方式。当你做onClick={this.handleOnClick(edge.node.id)}时，该事件只会在渲染过程中被调用一次。

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

【讨论】：

我仍然有 Uncaught TypeError: Cannot read property 'id' of undefined error :(
@iamnewbie 是来自onClick 行的错误吗？这意味着您的edge 没有名为node 的属性。尝试注销？

【解决方案2】：

在您的情况下，您在每次渲染后立即调用 handleOnClick，而不是将其传递给 onClick，以便在您单击该元素时调用它。

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

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

所以要解决这个问题，你可以创建一个箭头函数并将箭头函数传递给 onClick

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

你也不需要 id.preventDefault();没有了

【讨论】：