React JS 中父项和子项之间的检查和取消检查逻辑

Question

在React JS中，我面临着当我单击品牌时所有模型子项都被选中的问题。 如果我取消选中品牌，所有模型儿童都会隐藏起来。 帮我写一个逻辑，例如：-如果我检查现代，则只需显示和检查现代汽车型号。如果我取消选中任何一款现代车型，那么现代汽车就必须取消选中。

数据应该是这样的：

[
  {
    display: "HYUNDAI",
    status: false,
    filter: {
      key: "make",
      value: "hyundai",
    },
    count: 292,
    children: [
      {
        display: "Grand i10",
        status: false,
        filter: {
          key: "model",
          value: "grand i10",
        },
        count: 81,
      },
      {
        display: "CRETA",
        status: false,
        filter: {
          key: "model",
          value: "creta",
        },
        count: 47,
      },
      {
        display: "Elite i20",
        status: false,
        filter: {
          key: "model",
          value: "elite i20",
        },
        count: 44,
      },
    ],
  },
];

import React, { useEffect, useState } from "react";
import "./App.css";
import carData from './data.json';

const App = () => {
const [data, setData] = useState([]);
const [check, setCheck] = useState(false);

useEffect(() => {
  fetch(carData)
    .then((response) => response.json())
    .then((result) => setData(result))
    .catch((error) => console.log("error", error));
}, []);

return (
  <div>
   
    <h1>Car Brands and it's Models</h1>
    {data.map((el) => {
      return (
        <div className="data">
          <table className="table">
            <tc>
              <th>
                <input
                  type="checkbox"
                  className="checkbox"
                  value={check}
                  onClick={() => {
                    setCheck(!check);
                  }}
                />
                {el.display}
              </th>
            </tc>
            {check && (
              <div className="datas">
                {el.children.map((ele, innerIndex) => (
                  <div key={innerIndex}>
                    <tc>
                      <td>
                        <input type="checkbox" className="checkbox" checked />
                        {ele.display}
                      </td>
                    </tc>
                  </div>
                ))}
              </div>
            )}
          </table>
        </div>
      );
    })}
  </div>
);
};
export default App;

Answer 1

您还没有在评论中回答我的问题，所以我只会建议您需要的要求：

每当取消选中任何型号时，只需取消选中该品牌即可：

const handleUncheck = (e) => {
    let isModelChecked = e.target.checked;
    if(!isModelChecked){
        setCheck(false)
    }
}

<input type="checkbox" className="checkbox" checked onChange={handleUncheck}/>

完整代码：

import React, { useEffect, useState } from "react";
import "./App.css";
import carData from './data.json';

const App = () => {
const [data, setData] = useState([]);
const [check, setCheck] = useState(false);

const handleUncheck = (e) => {
    let isModelChecked = e.target.checked;
    if(!isModelChecked){
        setCheck(false)
    }
}

useEffect(() => {
  fetch(carData)
    .then((response) => response.json())
    .then((result) => setData(result))
    .catch((error) => console.log("error", error));
}, []);

return (
  <div>
   
    <h1>Car Brands and it's Models</h1>
    {data.map((el) => {
      return (
        <div className="data">
          <table className="table">
            <tc>
              <th>
                <input
                  type="checkbox"
                  className="checkbox"
                  value={check}
                  onClick={() => {
                    setCheck(!check);
                  }}
                />
                {el.display}
              </th>
            </tc>
            {check && (
              <div className="datas">
                {el.children.map((ele, innerIndex) => (
                  <div key={innerIndex}>
                    <tc>
                      <td>
                        <input type="checkbox" className="checkbox"
                        checked onChange={handleUncheck}/>
                        {ele.display}
                      </td>
                    </tc>
                  </div>
                ))}
              </div>
            )}
          </table>
        </div>
      );
    })}
  </div>
);
};
export default App;