reactjs - React Bootstrap 可点击的 Form.Check

Question

我在 ReactBootstrap 中遇到 Form.Check 的问题，我怎样才能让整个 div 可点击（当我点击标签时，该框被选中）？这是我的代码：

import React, { useState, useEffect } from "react";
import { Form } from "react-bootstrap";
const data = ["icecream", "coffee", "burger"];
const [checkedChoices, setCheckedChoices] = useState([]);
const onchangeCheckbox = (e) => {
!e.target.checked
  ? setCheckedChoices(
      checkedChoices.filter((each) => each !== e.target.value)
    )
  : setCheckedChoices([...checkedChoices, e.target.value]);
};
return (
<div>
  <Form>
    <Form.Group>
      {data.map((each) => {
        return (
          <Form.Check
            label={each}
            name="ex6"
            value={each}
            onChange={onchangeCheckbox}
          />
        );
      })}
    </Form.Group>
    <Form.Text>
      you chose{" "}
      {checkedChoices.length == 0 ? "nothing " : checkedChoices.toString()}
    </Form.Text>
  </Form>
</div>
);
};
export default Example6Forward;

标签： reactjscheckboxreact-bootstrap

Answer 1

您应该将 id 添加到 Form.Check。例如：

    {data.map((each, idx) => {
        return (
          <Form.Check
            id={idx}
            label={each}
            name="ex6"
            value={each}
            onChange={onchangeCheckbox}
          />
        );
      })}