点击省市区选择地区时，将勾选结果展现到右侧面板

2023-09-30 18:28:13







## 级联面板组件实现

为了实现级联面板组件，需要做的第一步是定义一个名为 `CascadePanel` 的 React 组件。这个组件将负责管理左侧区域的数据展示，以及处理用户点击父级节点时联动展示子级数据的逻辑。

```javascript
import React, { useState } from 'react';

const CascadePanel = () => {
  // 定义省市区数据
  const data = [
    {
      id: 1,
      name: '北京市',
      children: [
        { id: 2, name: '东城区' },
        { id: 3, name: '西城区' },
        { id: 4, name: '朝阳区' }
      ]
    },
    {
      id: 5,
      name: '上海市',
      children: [
        { id: 6, name: '黄浦区' },
        { id: 7, name: '徐汇区' },
        { id: 8, name: '长宁区' }
      ]
    },
    {
      id: 9,
      name: '广东省',
      children: [
        { id: 10, name: '广州市' },
        { id: 11, name: '深圳市' },
        { id: 12, name: '佛山市' }
      ]
    }
  ];

  // 定义勾选状态
  const [checked, setChecked] = useState({});

  // 处理点击父级节点时的逻辑
  const handleParentClick = (id) => {
    // 展开父级节点
    setChecked((prevChecked) => ({
      ...prevChecked,
      [id]: !prevChecked[id]
    }));

    // 联动展示子级数据
    const children = data.find((item) => item.id === id).children;
    children.forEach((child) => {
      setChecked((prevChecked) => ({
        ...prevChecked,
        [child.id]: !prevChecked[child.id]
      }));
    });
  };

  // 处理勾选状态改变时的逻辑
  const handleChange = (id) => {
    setChecked((prevChecked) => ({
      ...prevChecked,
      [id]: !prevChecked[id]
    }));
  };

  // 渲染左侧区域
  const renderLeftPanel = () => {
    return (
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            <input type="checkbox" checked={checked[item.id]} onChange={() => handleParentClick(item.id)} />
            {item.name}
            {item.children && (
              <ul>
                {item.children.map((child) => (
                  <li key={child.id}>
                    <input type="checkbox" checked={checked[child.id]} onChange={() => handleChange(child.id)} />
                    {child.name}
                  </li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    );
  };

  // 渲染右侧区域
  const renderRightPanel = () => {
    const selectedItems = [];
    for (const id in checked) {
      if (checked[id]) {
        const item = data.find((item) => item.id === Number(id));
        selectedItems.push(item.name);
      }
    }
    return (
      <ul>
        {selectedItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    );
  };

  return (
    <div>
      <div className="left-panel">
        {renderLeftPanel()}
      </div>
      <div className="right-panel">
        {renderRightPanel()}
      </div>
    </div>
  );
};

export default CascadePanel;