如何基于另一个react-select的值实现react-select选项过滤

我来帮你搞定这个需求！要让第二个<Select>只显示第一个选择器没选中的选项，咱们得用React的状态来跟踪第一个选择器的选中值，然后基于这个状态过滤第二个选择器的选项——这比用ref更符合React的数据流理念，代码也更可控。

首先，先修正你代码里的小问题（比如类组件少了class关键字），然后一步步实现：

单选场景的完整代码 #

import React from 'react'
import Select from 'react-select'

const list = [
  { label: 'foo', value: 1 },
  { label: 'bar', value: 2 },
  { label: 'bin', value: 3 },
]

export default class Test extends React.Component {
  // 用状态存储第一个选择器的选中项
  state = {
    selectedA: null
  }

  // 第一个选择器的选中事件处理函数
  handleSelectAChange = (selectedOption) => {
    this.setState({ selectedA: selectedOption })
  }

  render() {
    // 过滤第二个选择器的选项：排除第一个选中的项
    const filteredOptions = list.filter(option => {
      // 如果第一个选择器没选任何项，返回所有选项；否则排除选中的那个
      return !this.state.selectedA || option.value !== this.state.selectedA.value
    })

    return (
      <>
        <Select
          value={this.state.selectedA}
          onChange={this.handleSelectAChange}
          options={list}
          placeholder="选择第一个选项"
        />
        <Select
          options={filteredOptions}
          placeholder="选择未被第一个选中的选项"
        />
      </>
    )
  }
}

代码解释 #

1. 状态管理：用state.selectedA存储第一个选择器的选中值，这是React受控组件的标准写法，比ref更可靠。
2. 选中事件：handleSelectAChange会在第一个选择器的选中项变化时更新状态，确保我们始终拿到最新的选中值。
3. 选项过滤：通过Array.filter生成第二个选择器的选项，判断逻辑很简单：如果第一个选择器没选中任何项，就返回所有选项；否则排除掉和selectedA的value相同的选项。

如果需要支持多选场景 #

要是第一个选择器允许多选，只需要稍微调整一下逻辑：

import React from 'react'
import Select from 'react-select'

const list = [
  { label: 'foo', value: 1 },
  { label: 'bar', value: 2 },
  { label: 'bin', value: 3 },
]

export default class Test extends React.Component {
  // 多选场景下，状态改成数组
  state = {
    selectedA: []
  }

  handleSelectAChange = (selectedOptions) => {
    this.setState({ selectedA: selectedOptions })
  }

  render() {
    // 过滤逻辑改成：排除所有已被选中的项
    const filteredOptions = list.filter(option => {
      return !this.state.selectedA.some(selected => selected.value === option.value)
    })

    return (
      <>
        <Select
          isMulti // 开启多选
          value={this.state.selectedA}
          onChange={this.handleSelectAChange}
          options={list}
          placeholder="选择多个选项"
        />
        <Select
          options={filteredOptions}
          placeholder="选择未被选中的选项"
        />
      </>
    )
  }
}

这里用Array.some来检查当前选项是否已经在第一个选择器的选中列表里，从而实现多选场景下的过滤。

为什么不用ref？ #

你原来的代码里尝试用ref来获取第一个选择器的值，但在React里，ref主要用于访问DOM元素或类组件实例，获取表单控件的值更推荐用受控组件的方式——这样状态完全由React管理，避免了直接操作DOM带来的不可预测性，代码也更易维护。

内容的提问来源于stack exchange，提问作者Leandro Santiago Gomes