Question

我试图在此代码中使用中继来改变我的组件，但我不知道为什么我不能在列表上放置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 on lists不是，我有这个错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; id＆＃39;未定义＆＃34;但是我通过onClick = {this.handleOnClick（edge.node.id）}在调用时传递edge.node.id。我无法查看此代码中的错误。帮助

Answer 1

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

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

Answer 2

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

因为您需要将参数传递给函数，所以不能简单地将函数传递给onClick

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

因此，要解决此问题，您可以创建箭头功能并将箭头功能传递给onClick

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

你也不需要id.preventDefault（）;再

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

2 个答案: