Javascript 将DOM-Form与多个<；选择>；，从另一个选项中删除选项<；选择>；选择一个选项后

我有一个表单，其中4个输入使用来自同一状态的数据。我想要的是，在选择之后，选择选项将从另外3个选择中删除

我尝试了很多东西，很难在这里列出，但简单地说：我创建了另一个选定选项列表，用另一个列表过滤玩家数组，映射这个等等

这种方法的问题是：我不想从选中的输入中删除选中的项。因此，我尝试为每个输入创建相同原始列表的副本。但是，我认为这样做太多的“变通”

以下是我的组件：

import React, { Component } from 'react';

export default class MatchPlayerSelect extends Component {
   state = {
      selectedPlayers: [],
      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
         }
     ]
   }

   render() {
      const {players, selectedPlayers} = this.state;

      return (
         <div className="match-player">
            <select onChange={this.setPlayer.bind(this)}>
               <option defaultValue value="">-</option>
               {
                  // i need to filter list here
                  // but this code only list the items on state
                  players.map((player, index) => {
                     return(
                        <option key={index} value={player}>
                           {player.name}
                        </option>
                     )
                  })
               }
            </select>
         </div>
      );
   }

   setPlayer(sender) {      
      this.setState({ selectedPlayer: [...this.state.selectedPlayers, 
      sender.target.value] });
   }

}

import React，{Component}来自'React'；
导出默认类MatchPlayerSelect扩展组件{
状态={
选定的玩家：[]，
玩家：[
{
姓名：“埃德米尔”，
匹配项：0，
胜利：0
},
{
姓名：“willian”，
匹配项：0，
胜利：0
},
{
姓名：“古斯塔沃”，
匹配项：0，
胜利：0
},
{
姓名：“加布里埃尔”，
匹配项：0，
胜利：0
}
]
}
render（）{
const{players，selectedPlayers}=this.state；
返回(
-
{
//我需要在这里筛选列表
//但此代码仅列出状态栏上的项目
玩家地图（（玩家，索引）=>{
返回(
{player.name}
)
})
}
);
}
setPlayer（发送方）{
this.setState（{selectedPlayer:[…this.state.selectedPlayers，
sender.target.value]}）；
}
}

我需要选择所有组件渲染每个状态播放器（在上面的代码中已经这样做了）。但是，选择后，我需要从另一个输入中删除此选定选项，而不从焦点选择输入中删除。如果有更好的解决方案，请让我知道如何做

我需要使用react jsx工具或vanilla js来完成这项工作。没有jquery！

---

仅此而已。

因此，首先，您应该从渲染方法中删除此。选择Player.bind（此），这不利于React，有关更多信息，请遵循此操作。
在当前情况下，您需要添加一个额外的数组，它的总体外观如下：
1. <代码>玩家-您应该保留所有玩家（此玩家仅用于过滤）。
2.

filteredPlayers

-您应该在那里保存过滤后的播放器（这一个服务器用于呈现选项列表）。
3.

selectedPlayersIds

-确保收集所有所选玩家ID的阵列。
每次选择玩家时，您都会选择

players

array并删除所有选定玩家+新选定玩家，然后分配给

filteredPlayers

array。
代码片段（selectPlayer函数）

使用，而且，您需要对代码应用一些修复程序以使其正常工作：

• 在

  setPlayer

  将键改为

  selectedPlayers

• 将

  player

  数组映射到

  选项时，
  值
  属性必须是
  player.name
  而不是
  player

玩家
.filter（player=>！selectedPlayers.includes（player.name））
.map（（玩家，索引）=>(
{player.name}
));

完整示例：

class MatchPlayerSelect扩展组件{
状态={
选定的玩家：[]，
玩家：[
{
姓名：'edmiel'，
匹配项：0，
胜利：0
},
{
名字：“威利安”，
匹配项：0，
胜利：0
},
{
名称：“古斯塔沃”，
匹配项：0，
胜利：0
},
{
名字：“加布里埃尔”，
匹配项：0，
胜利：0
}
]
};
render（）{
const{players，selectedPlayers}=this.state；
返回(
-
{玩家
.filter（player=>！selectedPlayers.includes（player.name））
.map（（玩家，索引）=>(
{player.name}
))}
{JSON.stringify（selectedPlayers）}
);
}
setPlayer=sender=>{
const{selectedPlayers}=this.state；
这是我的国家({
selectedPlayers:[…selectedPlayers，sender.target.value]
});
};
}
ReactDOM.render（，document.getElementById（'root'））；

---

我不知道该怎么做，在选择球员时会发生什么？这个选项应该消失吗？请编辑您的问题并显示所需的行为。我很好地描述了上述问题，我不知道如何更好地解释：（您只需按所选的播放器筛选播放器，阅读关于#筛选和#包含的内容。我想澄清一下，尽管我已经多次对其进行了评论，但您需要制作一个可生产的示例，向我们展示您使用多个选择器的表单，向我们展示您为解决问题所做的一些努力，并简要解释示例的所需输入和输出是的，什么不起作用，就是这样，干杯。很好，我这样做了。这种方法的问题是，选定的玩家从当前焦点元素中删除。我的想法是在上下文中保留所有可能的选项。在我选择一个玩家时（有4个选项）所有其他人只需要3个选项，但仍然有4个选项，明白吗？不，我不明白，你的意思是你有多个选择？你在问题中没有提到。正如之前所建议的，制作一个所需的行为示例。是的，我有一个“具有多个选择的表单”在问题的标题中。我将编辑问题以使其更具体。我有

const selectedPlayersIds= [...this.state.selectedPlayersIds, newPlayer.id];
this.setState({
  filteredPlayers: this.state.players.filter(player => this.selectedPlayerIds.indexOf(player.id) !== -1),
  selectedPlayersIds
})

players
  .filter(player => !selectedPlayers.includes(player.name))
  .map((player, index) => (
    <option key={index} value={player.name}>
      {player.name}
    </option>
  ));

class MatchPlayerSelect extends Component {
  state = {
    selectedPlayers: [],
    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
      }
    ]
  };

  render() {
    const { players, selectedPlayers } = this.state;

    return (
      <div className="match-player">
        <select onChange={this.setPlayer}>
          <option defaultValue value="">
            -
          </option>
          {players
            .filter(player => !selectedPlayers.includes(player.name))
            .map((player, index) => (
              <option key={index} value={player.name}>
                {player.name}
              </option>
            ))}
        </select>
        <div>{JSON.stringify(selectedPlayers)}</div>
      </div>
    );
  }

  setPlayer = sender => {
    const { selectedPlayers } = this.state;
    this.setState({
      selectedPlayers: [...selectedPlayers, sender.target.value]
    });
  };
}
ReactDOM.render(<MatchPlayerSelect />, document.getElementById('root'));