React中实现两个下拉框互斥选值的问题求助

核心思路 #

用两个状态分别存储两个下拉框的选中值，渲染每个下拉框时，过滤掉另一个下拉框已选中的选项。同时处理初始状态和取消选择的场景（用户取消选择时，选项自动恢复）。

完整代码示例 #

import { useState } from 'react';

function MutexSelects() {
  // 原始选项数组，可根据你的实际字段调整（比如把id/name换成你用的key/label）
  const originalOptions = [
    { id: 1, name: "选项1" },
    { id: 2, name: "选项2" },
    { id: 3, name: "选项3" },
    { id: 4, name: "选项4" }
  ];

  // 两个状态存选中的选项对象，初始为null表示未选择
  const [selected1, setSelected1] = useState(null);
  const [selected2, setSelected2] = useState(null);

  // 生成第一个下拉框的可选项：排除第二个下拉框已选的选项
  const optionsForSelect1 = originalOptions.filter(option => {
    // 第二个下拉框没选就显示全部，否则排除已选项
    return selected2 === null || option.id !== selected2.id;
  });

  // 生成第二个下拉框的可选项：排除第一个下拉框已选的选项
  const optionsForSelect2 = originalOptions.filter(option => {
    return selected1 === null || option.id !== selected1.id;
  });

  return (
    <div style={{ gap: '10px', display: 'flex', padding: '20px' }}>
      <select
        value={selected1?.id || ""}
        onChange={(e) => {
          // 找到选中的完整选项对象
          const selectedOption = originalOptions.find(opt => opt.id === Number(e.target.value));
          setSelected1(selectedOption);
        }}
      >
        <option value="">请选择</option>
        {optionsForSelect1.map(option => (
          <option key={option.id} value={option.id}>
            {option.name}
          </option>
        ))}
      </select>

      <select
        value={selected2?.id || ""}
        onChange={(e) => {
          const selectedOption = originalOptions.find(opt => opt.id === Number(e.target.value));
          setSelected2(selectedOption);
        }}
      >
        <option value="">请选择</option>
        {optionsForSelect2.map(option => (
          <option key={option.id} value={option.id}>
            {option.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default MutexSelects;

关键细节&踩坑提示 #

• 状态初始化：一定要把初始选中值设为null，别用undefined或空字符串——之前你遇到的TypeError大概率是因为访问selected2.id时，selected2是undefined导致的。
• 类型匹配：e.target.value默认是字符串，如果你的选项id是数字，记得用Number()转成数字再对比，否则会出现“看起来值相等但过滤失效”的问题。
• 取消选择处理：加空选项<option value="">请选择</option>，用户取消选择时，另一个下拉框的选项会自动恢复显示。

扩展优化 #

如果需要支持3个及以上下拉框，可以把状态改成数组，比如const [selectedValues, setSelectedValues] = useState([null, null, null])，然后循环渲染下拉框，过滤逻辑动态排除已选中的所有值即可。

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