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

Question

我想在选中主复选框时动态选中子复选框。我在 Whosebug 上找到了一些解决方案和其他相关的 post，但他们总是使用 JQuery。我想使用 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

尝试使用此节点包检查（父->子）复选框和分层复选框。

npm install react-checkbox-tree --save

Answer 2

所以在这种情况下，您需要有一个复选框组和复选框组件。检查以下代码段。多亏了这个package.

为了您的目的，您可以安装包并使用，这样包的大小会更小。

为了更好地理解，添加了 div 以显示单击每个复选框和父复选框时的值。

App.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;

工作condesandbox

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

How to check child checkboxs when the main one is checked using React?

html

javascript

checkbox

reactjs