Question

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

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

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

1 个答案: