如何获取 React-bootstrap 复选框的当前状态？ （无论是否签到）

Question

我正在使用React Bootstrap Check Form。我正在使用表单复选框来捕获输入值。我想在反应状态变量中获取有关复选框的信息。

我希望onClick 的e.target.value 将打印复选框的当前状态，即它是打开还是关闭（无论是否选中）。但这不会发生。当我多次切换复选框按钮时，e.target.value 的值仍为 on，即使复选框已关闭。

<Form.Group>
    <Form.Check type={"checkbox"}>
        <Form.Check.Input
          type={"checkbox"}
          defaultChecked={true}
          onClick={(e) => {
            console.log(e.target.value);
          }}
        />
        <Form.Check.Label>Awesome checkbox here..</Form.Check.Label>
    </Form.Check>
</Form.Group>

React侧逻辑中如何获取复选框是否被勾选的状态？

Answer 1

您可以使用e.target.checked 访问复选框值

<Form.Group>
  <Form.Check type={"checkbox"}>
    <Form.Check.Input
      type={"checkbox"}
      defaultChecked={true}
      onClick={(e) => {
        console.log(e.target.checked);
      }}
    />
    <Form.Check.Label>Awesome checkbox here..</Form.Check.Label>
  </Form.Check>
</Form.Group>