react实现四级联动

下面是一个简单的React实现四级联动的例子：

import React, { useState } from "react";

const options = {
  "浙江省": {
    "杭州市": {
      "西湖区": ["西湖街道", "灵隐街道"],
      "上城区": ["中山北路街道", "南星街道"]
    },
    "宁波市": {
      "海曙区": ["中山东路街道", "白云街道"],
      "江东区": ["庄桥街道", "七塘街道"]
    }
  },
  "江苏省": {
    "南京市": {
      "玄武区": ["梅园新村街道", "红山街道"],
      "秦淮区": ["夫子庙街道", "集庆门街道"]
    },
    "苏州市": {
      "姑苏区": ["虎丘街道", "石路街道"],
      "吴中区": ["香山街道", "越溪街道"]
    }
  }
};

function Cascader() {
  const [province, setProvince] = useState("浙江省");
  const [city, setCity] = useState("杭州市");
  const [district, setDistrict] = useState("西湖区");
  const [street, setStreet] = useState("西湖街道");

  const handleProvinceChange = (e) => {
    setProvince(e.target.value);
    setCity(Object.keys(options[e.target.value])[0]);
    setDistrict(Object.keys(options[e.target.value][Object.keys(options[e.target.value])[0]])[0]);
    setStreet(options[e.target.value][Object.keys(options[e.target.value])[0]][Object.keys(options[e.target.value][Object.keys(options[e.target.value])[0]])[0]][0]);
  };

  const handleCityChange = (e) => {
    setCity(e.target.value);
    setDistrict(Object.keys(options[province][e.target.value])[0]);
    setStreet(options[province][e.target.value][Object.keys(options[province][e.target.value])[0]][0]);
  };

  const handleDistrictChange = (e) => {
    setDistrict(e.target.value);
    setStreet(options[province][city][e.target.value][0]);
  };

  const handleStreetChange = (e) => {
    setStreet(e.target.value);
  };

  return (
    <div>
      <select value={province} onChange={handleProvinceChange}>
        {Object.keys(options).map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
      <select value={city} onChange={handleCityChange}>
        {Object.keys(options[province]).map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
      <select value={district} onChange={handleDistrictChange}>
        {Object.keys(options[province][city]).map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
      <select value={street} onChange={handleStreetChange}>
        {options[province][city][district].map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
}

export default Cascader;

在这个例子中，我们使用了`useState`来管理四个状态：`province`、`city`、`district`和`street`，分别代表省、市、区和街道。我们通过`select`元素来实现四级联动，每一级的选项都是根据上一级的选项来动态生成的。

当省份选项发生改变时，我们需要根据选中的省份来动态生成城市选项，同时也需要把城市、区和街道的选项重置为默认值。当城市选项发生改变时，我们需要根据选中的城市来动态生成区选项，并重置街道选项为默认值。当区选项发生改变时，我们需要根据选中的区来动态生成街道选项。当街道选项发生改变时，我们只需要更新`street`状态的值即可。

上述代码只是一个简单的例子，实际情况下可能会更加复杂。但是原理是相同的：通过状态来实现四级联动，根据当前选中的选项来动态生成下一级选项。