如何获得一个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-side逻辑?

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>