Reactjs 复选框仅在单击两次时更改值

正如标题所说，我设置了一个复选框，其中有一个问题，我需要单击它两次以更改其状态

第一次单击时，它的行为与预期的一样，但之后的每次尝试都需要双击

state = {
    notification: true,
};

handleInputChange= (event) => {
//I use event.target to operate since I'm trying to set up multiple checkboxes
    this.setState({ [event.target.id]: !event.target.checked });
};

<AppSwitch
  checked={this.state.notification}
  onChange={this.handleInputChange}
  className={"mx-1 switch-color"}
  color={"success"}
  variant={"pill"}
  id="notification"
  name="notification"
/>

状态={
通知：正确，
};
handleInputChange=（事件）=>{
//我使用event.target进行操作，因为我正在尝试设置多个复选框
this.setState（{[event.target.id]：！event.target.checked}）；
};

你不需要！当你在这里设置状态时。它应该是

this.setState（{[event.target.id]：event.target.checked}）

，因为

事件.target.checked

返回复选框的选中状态。因此，如果您单击复选框并将其转换为选中，则它将为真。然后，如果您单击该复选框并将其转换为未选中，则该复选框将为false。

您不需要！当你在这里设置状态时。它应该是

this.setState（{[event.target.id]：event.target.checked}）

，因为

事件.target.checked

返回复选框的选中状态。因此，如果您单击复选框并将其转换为选中，则它将为真。然后，如果单击该复选框并将其转换为未选中，则该复选框将为false。

do console log每次都会看到其event.target.checked具有相同的值。event.target.checked是否返回复选框是否选中？如果是这样，那么你就不需要了！它

this.setState（{[event.target.id]：event.target.checked}）我做了，那个时我意识到它只在我点击两次后才改变值。每次点击它都会输出“true>false>false>true>true>false>false>true”之类的内容。@jvgaeta做到了，但我不明白为什么。介意我请你详细解释一下为什么会这样吗？没问题！很乐意提供帮助。do console log您将看到每次选中它的event.target.checked都具有相同的值。event.target.checked是否返回复选框是否选中？如果是这样，那么你就不需要了！它
this.setState（{[event.target.id]：event.target.checked}）我做了，那个时我意识到它只在我点击两次后才改变值。每次点击它都会输出“true>false>false>true>true>false>false>true”之类的内容。@jvgaeta做到了，但我不明白为什么。介意我请你详细解释一下为什么会这样吗？没问题！很乐意帮忙。