使用 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 以显示单击每个父复选框时的值。

应用程序.js

import 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