javascript - 单击后选择一个特定的待办事项 ID

Question

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

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)}
             />
         .....

Answer 1

您目前正在您的渲染方法中直接调用 handleCheckBox。您想为 onClick 提供函数引用。

所以不是这个:

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

这样做:

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