如何在React渲染函数中实现二级下拉菜单依赖一级选择

核心思路 #

通过React状态管理跟踪第一个下拉菜单的选中值，基于该值动态过滤第二个下拉菜单的可选项。先把区域选项与对应环境的权限映射整理成配置，再根据当前选中环境渲染符合条件的选项。

函数组件实现（React 16.8+ 主流方案） #

import { useState } from 'react';

function EnvRegionSelector() {
  // 维护选中的环境状态，初始值设为默认选项Dev
  const [selectedEnv, setSelectedEnv] = useState('Dev');

  // 定义区域选项及对应的允许环境，便于后续维护和过滤
  const regionOptions = [
    { value: 'option1', label: 'op1', allowedEnvs: ['Dev', 'Staging', 'Prod'] },
    { value: 'option2', label: 'op2', allowedEnvs: ['Staging', 'Prod'] },
    { value: 'option3', label: 'op3', allowedEnvs: ['Staging', 'Prod'] },
    { value: 'option4', label: 'op4', allowedEnvs: ['Prod'] },
  ];

  // 根据当前选中环境过滤出可显示的区域选项
  const filteredRegions = regionOptions.filter(region => 
    region.allowedEnvs.includes(selectedEnv)
  );

  return (
    <div>
      <select 
        name="env" 
        id="env"
        value={selectedEnv}
        onChange={(e) => setSelectedEnv(e.target.value)}
      >
        <option value="Dev">Dev</option>
        <option value="Staging">Staging</option>
        <option value="Prod">Prod</option>
      </select>

      <select name="region" id="region">
        {filteredRegions.map(region => (
          <option key={region.value} value={region.value}>
            {region.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export default EnvRegionSelector;

关键逻辑说明 #

• 状态绑定：用useState钩子管理选中环境，第一个下拉菜单的value与状态绑定，onChange事件触发状态更新。
• 动态过滤：每次状态更新后，通过filter方法筛选出当前环境允许的区域选项，再用map渲染到第二个下拉菜单。
• 配置化管理：把区域的权限规则集中在配置数组里，后续新增或修改规则只需调整数组，不用改动渲染逻辑。

类组件实现（兼容旧版React） #

如果项目仍使用类组件，可通过组件内部state实现相同效果：

import React, { Component } from 'react';

class EnvRegionSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedEnv: 'Dev'
    };
  }

  regionOptions = [
    { value: 'option1', label: 'op1', allowedEnvs: ['Dev', 'Staging', 'Prod'] },
    { value: 'option2', label: 'op2', allowedEnvs: ['Staging', 'Prod'] },
    { value: 'option3', label: 'op3', allowedEnvs: ['Staging', 'Prod'] },
    { value: 'option4', label: 'op4', allowedEnvs: ['Prod'] },
  ];

  handleEnvChange = (e) => {
    this.setState({ selectedEnv: e.target.value });
  };

  render() {
    const { selectedEnv } = this.state;
    const filteredRegions = this.regionOptions.filter(region => 
      region.allowedEnvs.includes(selectedEnv)
    );

    return (
      <div>
        <select 
          name="env" 
          id="env"
          value={selectedEnv}
          onChange={this.handleEnvChange}
        >
          <option value="Dev">Dev</option>
          <option value="Staging">Staging</option>
          <option value="Prod">Prod</option>
        </select>

        <select name="region" id="region">
          {filteredRegions.map(region => (
            <option key={region.value} value={region.value}>
              {region.label}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

export default EnvRegionSelector;

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