How to get the current status of a React-bootstrap Checkbox? (whether checked in or not)-CodePudding

I am using React Bootstrap Check Form. I am using a Form Checkbox to capture an input value. I wants to get the information about the Checkbox in a react state variables. I expect the e.target.value of onClick shall print the current status of the checkbox , ie, whether it is on or off(whether it is checked or not). But this does not happen. When I toggle the checkbox button several times, the value of e.target.value remains as on, even when the checkbox is turned off.

             <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>

How can I get the status of whether the check box is checked in or not in the React-side logic?

CodePudding user response：

You can access checkbox value using 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>