React实现：根据第一个Select框选中值动态加载第二个Select框选项

嘿，我来帮你搞定这个联动Select的需求！在React里实现这个功能其实很简单，核心就是用状态跟踪第一个选择框的选中值，然后根据这个值动态生成第二个选择框的选项。下面是完整的实现方案：

完整代码示例 #

import { useState } from 'react';

function DynamicSelects() {
  // 初始化状态，跟踪第一个Select的选中值，默认选"Integers"
  const [selectedType, setSelectedType] = useState("Integers");

  // 定义不同类型对应的选项数据，方便后续扩展
  const optionsData = {
    Integers: Array.from({ length: 10 }, (_, i) => i + 1), // 生成1-10的数组
    Alphabets: Array.from({ length: 26 }, (_, i) => String.fromCharCode(97 + i)) // 生成a-z的数组
  };

  // 处理第一个Select的选择变化
  const handleTypeChange = (e) => {
    setSelectedType(e.target.value);
  };

  return (
    <div>
      {/* 第一个固定选项的Select */}
      <select value={selectedType} onChange={handleTypeChange}>
        <option value="Integers">Integers</option>
        <option value="Alphabets">Alphabets</option>
      </select>

      {/* 第二个动态生成的Select */}
      <select>
        {optionsData[selectedType].map((item, index) => (
          <option key={index} value={item}>
            {item}
          </option>
        ))}
      </select>
    </div>
  );
}

export default DynamicSelects;

关键部分解释 #

• 状态管理：用useState钩子保存第一个选择框的选中值selectedType，当用户选择不同选项时，通过handleTypeChange函数更新这个状态。
• 动态选项生成：我们把不同类型对应的选项存在optionsData对象里，这样当selectedType变化时，直接从对象中取出对应的数组，用map渲染成<option>标签即可。
• 扩展性：如果之后需要添加更多类型（比如"Symbols"），只需要在optionsData里新增一个键值对，不用修改太多代码，非常灵活。

小提示 #

• 记得给每个<option>加上唯一的key属性，这里用index是因为选项是简单的数值/字符，如果是复杂对象建议用唯一ID。
• 你可以根据需求调整默认选中值，比如把初始useState的参数改成"Alphabets"，第二个Select就会默认显示字母选项。

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