如何在多选react-select中获取单个选中项及移除项信息？

这两个问题在react-select的多选场景里确实挺常见的，我来给你拆解一下解决方案：

因为react-select在多选模式下，onChange默认只会返回所有已选中项的完整数组，没有直接返回单个新增项的API。所以我们需要通过对比前后选中状态来找出刚新增的那一项：

1. 首先用状态保存之前的选中值，每次触发onChange时，对比新数组和旧数组的差异；
2. 找出新数组中存在、但旧数组中没有的项，就是刚选中的单个项。

给你写个完整的示例代码：

import { useState } from 'react';
import Select from 'react-select';

const MultiSelectExample = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  // 保存上一次的选中状态，用于对比
  const [prevSelectedOptions, setPrevSelectedOptions] = useState([]);

  const handleSelectChange = (newSelectedOptions) => {
    // 找出刚选中的单个项（如果是批量多选，这里会返回undefined，可根据需求调整）
    const newlyAdded = newSelectedOptions.find(
      option => !prevSelectedOptions.some(prev => prev.value === option.value)
    );

    if (newlyAdded) {
      console.log('当前选中的单个项:', newlyAdded);
      // 这里可以写你针对单个选中项的业务逻辑
    }

    // 更新状态：先把当前选中值存为上一次的，再更新最新选中值
    setPrevSelectedOptions(selectedOptions);
    setSelectedOptions(newSelectedOptions);
  };

  const options = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'orange', label: '橙子' }
  ];

  return (
    <Select
      isMulti
      options={options}
      value={selectedOptions}
      onChange={handleSelectChange}
    />
  );
};

export default MultiSelectExample;

注意：如果用户可能会批量选中多个项（比如按住Ctrl点击），newlyAdded会是undefined，这时候可以用filter替代find，拿到所有新增的项：

const newlyAddedItems = newSelectedOptions.filter(
  option => !prevSelectedOptions.some(prev => prev.value === option.value)
);

同样，react-select没有专门的事件来监听单个选项的移除动作，还是需要对比前后选中数组来找出被移除的项：

在onChange回调里，找出旧数组中存在、但新数组中没有的项，就是被移除的那个选项：

修改上面的handleSelectChange函数：

const handleSelectChange = (newSelectedOptions) => {
  // 找出被移除的项
  const removedOption = prevSelectedOptions.find(
    option => !newSelectedOptions.some(newOpt => newOpt.value === option.value)
  );

  if (removedOption) {
    console.log('被移除的选项:', removedOption);
    // 处理移除后的业务逻辑，比如弹窗提示、更新其他状态等
  }

  // 同样更新前后状态
  setPrevSelectedOptions(selectedOptions);
  setSelectedOptions(newSelectedOptions);
};

这个方法不管是点击选项右侧的×图标，还是选中某个选项后按退格键删除，都能准确捕获到被移除的项。

另外要注意：如果你的选项是动态生成的，一定要用选项的唯一标识（比如value字段）来做对比，不要直接用对象引用判断，因为重新渲染后对象引用会变化，导致includes判断失效。

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