React多<select>表单：选中选项后从其他下拉框移除该选项

你遇到的核心问题是没有精准跟踪每个下拉框的选中状态，以及过滤选项时没区分「当前下拉框已选值」和「其他下拉框已选值」。下面给你一个简洁的React实现方案，不用为每个框单独存副本，靠统一状态管理就能搞定需求：

import React, { Component } from 'react';

export default class MatchPlayerSelect extends Component {
  // 用数组记录4个下拉框的选中值，索引对应第几个下拉框，初始为null表示未选择
  state = {
    selectedPlayers: [null, null, null, null],
    players: [
      { name:"edmiel", matches:0, wins:0 },
      { name:"willian", matches:0, wins:0 },
      { name:"gustavo", matches:0, wins:0 },
      { name:"gabriel", matches:0, wins:0 }
    ]
  }

  // 柯里化事件处理函数，绑定当前下拉框的索引
  setPlayer = (index) => (e) => {
    // 把选中的player对象转成字符串存储（option的value只能是字符串）
    const selectedValue = e.target.value ? JSON.parse(e.target.value) : null;
    // 复制原数组并更新对应索引的选中值，避免直接修改原状态
    const newSelectedPlayers = [...this.state.selectedPlayers];
    newSelectedPlayers[index] = selectedValue;
    this.setState({ selectedPlayers: newSelectedPlayers });
  }

  render() {
    const { players, selectedPlayers } = this.state;
    return (
      <div className="match-player">
        {/* 循环生成4个下拉框 */}
        {selectedPlayers.map((selected, index) => (
          <select 
            key={index} 
            onChange={this.setPlayer(index)}
            value={selected ? JSON.stringify(selected) : ""}
          >
            <option value="">-</option>
            {players.map((player) => {
              // 过滤逻辑：
              // 1. 如果是当前下拉框已选的player，必须保留
              // 2. 如果没被其他任何下拉框选中，也显示出来
              const isTakenByOthers = selectedPlayers.some((p, i) => i !== index && p?.name === player.name);
              if (selected?.name === player.name || !isTakenByOthers) {
                return (
                  <option key={player.name} value={JSON.stringify(player)}>
                    {player.name}
                  </option>
                );
              }
              return null;
            })}
          </select>
        ))}
      </div>
    );
  }
}

关键逻辑拆解 #

• 状态设计：用selectedPlayers数组跟踪每个下拉框的选中值，索引和下拉框一一对应，能精准掌控每个框的选择状态。
• 过滤规则：每个下拉框只显示两种选项：自己已经选中的那个（保证选中后不会从当前框消失），以及没被其他任何框选中的选项。
• 事件处理：通过柯里化函数给每个下拉框绑定专属索引，确保更新状态时能准确修改对应位置的值，不会影响其他框的状态。
• 值的序列化：因为<option>的value只能是字符串，所以用JSON.stringify和JSON.parse处理player对象，保证选中值能正确对应。

这个方案还支持清空选择的联动：当某个下拉框取消选择时，其他框会自动重新显示这个player选项。

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