使用 React 检查主复选框时如何检查子复选框？

Question

我想在检查主复选框时动态检查子复选框。我想使用 ReactJS 来实现这一点，这是我的代码片段。

ul {

    list-style-type: none;

}

<div>

<input type="checkbox" id="fullbody" />

<label htmlFor="fullbody">Download the points for the full body</label>

<ul>

    <li><input type='checkbox' id="upperbody"/>Download only the upper body points</li>

    <li><input type='checkbox' id="lowerbody" />Download only the lower body points</li>

    <li><input type='checkbox' id="head" />Download only the head points</li>

    <li><input type='checkbox' id="fullhands" />Download both hands points</li>

    <li><input type='checkbox' id="lefthand" />Download left hand points</li>

    <li><input type='checkbox' id="righthand" />Download right hand points</li>

</ul>

</div>

所以我的问题是，如何在fullbody选中时动态检查子复选框？

Answer 1

因此，在这种情况下，您需要有一个复选框组和复选框组件。检查下面的代码片段。为了您的目的，您可以安装该包并使用，以便包大小会更小。为了更好地理解，添加了一个 div 以显示单击每个父复选框时的值。应用程序.jsimport React from "react";import { CheckboxGroup, AllCheckerCheckbox, Checkbox } from "./Checkbox";import "./styles.css";const App = () => {  const [onChange, setOnChange] = React.useState({});  return (    <div>      <CheckboxGroup onChange={setOnChange}>        <label>          <AllCheckerCheckbox />          <span>Download the points for the full body</span>        </label>        <ul>          <li>            <label>              <Checkbox name="upperbody" />              <span>Download only the upper body points</span>            </label>          </li>          <li>            <label>              <Checkbox name="lowerbody" />              <span>Download only the lower body points</span>            </label>          </li>          <li>            <label>              <Checkbox name="head" />              <span>Download only the head points</span>            </label>          </li>          <li>            <label>              <Checkbox name="fullhands" />              <span>Download both hands points</span>            </label>          </li>          <li>            <label>              <Checkbox name="lefthand" />              <span>Download left hand points</span>            </label>          </li>          <li>            <label>              <Checkbox name="righthand" />              <span>Download right hand points</span>            </label>          </li>        </ul>      </CheckboxGroup>      <div>        <h1>Values</h1>        <pre>{JSON.stringify(onChange, null, 2)}</pre>      </div>    </div>  );};export default App;工作压缩沙箱

Answer 2

尝试使用此节点包来检查（父级->子级）复选框和分层复选框。npm install react-checkbox-tree --save