当前位置：首页 > React

react如何实现三级联动

2026-01-26 06:50:38React

实现三级联动的基本思路

三级联动通常指三个下拉菜单（Select）之间的数据依赖关系，例如省份、城市、区县的级联选择。React中实现的核心在于状态管理和数据结构的组织。

数据结构设计

采用嵌套对象或数组存储层级数据，例如：

const regionData = [
  {
    id: 1,
    name: '广东省',
    children: [
      {
        id: 11,
        name: '广州市',
        children: [
          {id: 111, name: '天河区'},
          {id: 112, name: '越秀区'}
        ]
      }
    ]
  }
]

组件状态管理

使用useState分别存储三个层级的选择状态：

const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [districts, setDistricts] = useState([]);
const [selectedProvince, setSelectedProvince] = useState('');
const [selectedCity, setSelectedCity] = useState('');
const [selectedDistrict, setSelectedDistrict] = useState('');

事件处理逻辑

当省份选择变化时清空下级选项并加载城市数据：

const handleProvinceChange = (e) => {
  const provinceId = e.target.value;
  setSelectedProvince(provinceId);
  setSelectedCity('');
  setSelectedDistrict('');

  const targetProvince = regionData.find(p => p.id == provinceId);
  setCities(targetProvince?.children || []);
  setDistricts([]);
}

城市选择变化时同理处理区县数据：

const handleCityChange = (e) => {
  const cityId = e.target.value;
  setSelectedCity(cityId);
  setSelectedDistrict('');

  const targetCity = cities.find(c => c.id == cityId);
  setDistricts(targetCity?.children || []);
}

渲染下拉菜单

<select value={selectedProvince} onChange={handleProvinceChange}>
  <option value="">选择省份</option>
  {provinces.map(p => (
    <option key={p.id} value={p.id}>{p.name}</option>
  ))}
</select>

<select value={selectedCity} onChange={handleCityChange}>
  <option value="">选择城市</option>
  {cities.map(c => (
    <option key={c.id} value={c.id}>{c.name}</option>
  ))}
</select>

<select value={selectedDistrict} onChange={e => setSelectedDistrict(e.target.value)}>
  <option value="">选择区县</option>
  {districts.map(d => (
    <option key={d.id} value={d.id}>{d.name}</option>
  ))}
</select>

性能优化建议

对于大数据量场景：

使用useMemo缓存计算结果
考虑异步加载数据
使用虚拟滚动技术处理超长列表

完整组件示例

function Cascader() {
  const [data] = useState(regionData);
  const [provinces, setProvinces] = useState(data);
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);

  // 状态和事件处理同上...

  return (
    <div className="cascader">
      {/* 三个select渲染 */}
    </div>
  );
}