javascript - 在 React 中使用子项和父项留下嵌套的复选框单击

Question

我有一个函数，它从包含嵌套值（具有多层的父级和子级）的 json 接收值，并且该函数为每个项目设置一个复选框，其子级位于其各自的父级之下。

单击父复选框时我需要帮助，所有子复选框都将被选中，当单击子复选框且未单击其他子复选框时，如果只有一个子元素，父元素将处于“不确定”状态复选框并单击它或单击所有子元素，然后选择父元素。

您可以通过单击此处查看其行为方式的屏幕截图。

在这里您可以在线查看该项目。

我的代码：

CheckboxItem 组件：

import { useState } from "react";
import Checkbox from "react-three-state-checkbox";

export function CheckboxItem(props) {
  const [isChecked, setIsChecked] = useState(false);

  function clickCheckbox() {
    setIsChecked(!isChecked);
  }
  return (
    <>
      <Checkbox
        checked={isChecked}
        // indeterminate={props.indeterminate}
        onChange={clickCheckbox}
      />
      {props.children}
    </>
  );
}

ChildrenMap 组件：

import { CheckboxItem } from "../CheckboxItem";
import * as S from "./styled";

export function ChildrenMap({ itens }) {
  const filhos = Object.values(itens);
  return (
    <div>
      {filhos.map((item, i) => (
        <S.Itens key={i}>
          <CheckboxItem>
            {item.name}
          </CheckboxItem>
          <ChildrenMap itens={item.children} key={i} />
        </S.Itens>
      ))}
    </div>
  );
}

主文件：

import React from "react";
import ReactDOM from "react-dom";
import { ChildrenMap } from "./components/ChildrenMap";
import data from "./data.json";

function App() {
  return (
    <>
      {data.itens.map((item, i) => (
        <div key={i}>
          <ChildrenMap itens={item} key={i} />
        </div>
      ))}
    </>
  );
}

标签： javascriptreactjs