React DOM - 具有多个 <select> 的表单，选择一个选项后从另一个 <select> 中删除选项

Question

我有一个包含 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] });
   }

}

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

我需要使用 react jsx 工具或 vanilla js 来执行此操作。没有jquery！ 就是这样。

Answer 1

所以首先，你应该从渲染方法中删除this.selectPlayer.bind(this)，这对 React 不利，更多请关注link。
在当前情况下，您需要添加一个额外的数组，它应该看起来像：
1. players - 你应该保留所有玩家（这个仅用于过滤）。
2. filteredPlayers - 你应该保留过滤后的播放器（这个服务器用于渲染选项列表）。
3. selectedPlayersIds- 当然，您收集所有选定玩家 ID 的数组。
每次选择玩家时，您将采用players数组并删除所有选定的玩家+新选定的玩家并分配给filteredPlayers数组。
代码片段（selectPlayer 函数）

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

Answer 2

使用#Array.filter 和#Array.includes，此外，您需要对代码进行一些修复以使其正常工作：

• 在setPlayer 将密钥更改为selectedPlayers 而不是selectedPlayer
• 在将 players 数组映射到 option 时，value 属性必须是 player.name 而不是 player

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'));