React中如何实现基于选中地区的省份联动下拉选择框

要实现基于选中地区动态展示对应省份的联动下拉框，核心是利用React状态跟踪选中的地区，再根据状态筛选出对应的省份数据，具体实现步骤如下：

完整实现代码 #

import { useState } from 'react';

// 意大利地区数据
const italianRegions = [
  {
    name: "Abruzzo",
    slug: "abruzzo",
    province: [
      { name: "L'Aquila", abbreviato: "AQ", slug: "laquila" },
      { name: "Teramo", abbreviato: "TE", slug: "teramo" },
      { name: "Pescara", abbreviato: "PE", slug: "pescara" },
      { name: "Chieti", abbreviato: "CH", slug: "chieti" },
    ],
  },
  {
    name: "Basilicata",
    slug: "basilicata",
    province: [
      { name: "Potenza", abbreviato: "PZ", slug: "potenza" },
      { name: "Matera", abbreviato: "MT", slug: "matera" },
    ],
  },
  // 其他地区数据...
];

const RegionProvinceSelector = () => {
  // 跟踪选中的地区索引，初始值设为0默认选中第一个地区
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
  
  // 根据选中索引获取对应省份列表，使用可选链避免索引无效时报错
  const currentProvinces = italianRegions[selectedRegionIndex]?.province || [];

  return (
    <div>
      {/* 地区选择框 */}
      <select 
        name="regions" 
        id="regions" 
        value={selectedRegionIndex}
        onChange={(e) => setSelectedRegionIndex(Number(e.target.value))}
      >
        {italianRegions.map((region, index) => (
          <option key={index} value={index}>
            {region.name}
          </option>
        ))}
      </select>

      {/* 省份选择框 */}
      <select name="provinces" id="provinces">
        {currentProvinces.map((province, idx) => (
          <option key={idx} value={province.slug}>
            {province.name} ({province.abbreviato})
          </option>
        ))}
      </select>
    </div>
  );
};

export default RegionProvinceSelector;

关键说明 #

• 状态管理：使用useState钩子维护选中的地区索引，状态更新时组件自动重新渲染，确保省份列表与选中地区同步。
• 绑定选中状态：地区选择框的value直接绑定到selectedRegionIndex，保证UI选中状态与内部状态一致。
• 类型转换：onChange事件中将e.target.value转为数字（option的value默认是字符串类型），确保索引匹配数组的数字索引。
• 安全取值：用?.可选链操作符获取省份列表，避免索引无效时出现Cannot read property 'province' of undefined的错误。

可选优化：添加空选项与禁用状态 #

如果需要用户先选择地区再显示省份，可以调整代码增加空选项和禁用逻辑：

const RegionProvinceSelector = () => {
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(null);
  const currentProvinces = italianRegions[selectedRegionIndex]?.province || [];

  return (
    <div>
      <select 
        name="regions" 
        id="regions" 
        value={selectedRegionIndex}
        onChange={(e) => setSelectedRegionIndex(e.target.value ? Number(e.target.value) : null)}
      >
        <option value="">请选择地区</option>
        {italianRegions.map((region, index) => (
          <option key={index} value={index}>
            {region.name}
          </option>
        ))}
      </select>

      <select 
        name="provinces" 
        id="provinces" 
        disabled={!selectedRegionIndex}
      >
        {!selectedRegionIndex ? (
          <option value="">请先选择地区</option>
        ) : (
          currentProvinces.map((province, idx) => (
            <option key={idx} value={province.slug}>
              {province.name} ({province.abbreviato})
            </option>
          ))
        )}
      </select>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者aBarl