单击后选择一个特定的待办事项ID答案

【问题标题】：Select one particular todo id after click单击后选择一个特定的待办事项ID
【发布时间】：2018-07-09 07:25:19
【问题描述】：

我正在创建一个简单的待办事项应用程序，我正在像这样获取数据作为道具

id:"5b3447a7b9d0e02144538972"
text:"biibbb"

来自 GraphQL Server，我现在想要的是当我点击待办事项的复选框时，我只想记录那个特定的待办事项的 id，但是，它正在记录整个 id，如下所示：

5b3447a7b9d0e02144538972
5b36ecfdcc8e551bb02b4dac
5b36ed01cc8e551bb02b4dad
5b3702facc8e551bb02b4dae

，有人可以推荐一下吗。

handleCheckBox = index => {
       console.log(index);
  }
  render() {
    const {data: {loading, todos}} = this.props;
    if(loading) {
      return null;
    }
    return (
        <div>
          {todos.map(todo => (
          <List key={todo.id}>
          <Checkbox
                onClick={this.handleCheckBox(todo.id)}
             />
         .....

【问题讨论】：

标签： javascript reactjs graphql

【解决方案1】：

您当前正在您的渲染方法中直接调用handleCheckBox。你想给onClick一个函数引用。

所以不要这样：

<Checkbox onClick={this.handleCheckBox(todo.id)} />

这样做：

<Checkbox onClick={() => this.handleCheckBox(todo.id)} />

【讨论】：

@JasonWilliam 太棒了！请记住，事件处理程序（onClick，onChange，...）需要一个可以在事件发生时调用的函数。你不应该自己调用事件处理函数。