如何在react-select多选组件中实现反向选择功能

看起来你想要给react-select的多选组件加个「反向选择」的选项，点击它就能把已选和未选的选项互换，而且这个选项本身不会出现在顶部的已选预览里对吧？我来一步步教你实现：

第一步：添加「反向选择」选项到选项列表最顶部 #

首先，我们需要在生成options数组的时候，把「反向选择」这个特殊选项放在最前面，用一个独特的value（比如'INVERT'）来标识它，这样后面好判断是不是触发了反向操作：

options={(() => {
  // 先生成原来的有效选项（只保留isActive的）
  const validOptions = issuesTypes.results
    .filter(iT => iT.isActive)
    .map(iT => ({ value: iT.id, label: iT.title }));
  
  // 添加反向选择选项到最前面
  return [{ value: 'INVERT', label: '反向选择' }, ...validOptions];
})()}

第二步：修改onChange逻辑，处理反向选择操作 #

接下来要重点处理onChange函数，利用第二个参数action来判断用户是不是选中了「反向选择」这个选项，然后执行反向逻辑：

首先，我们先在组件外定义一个变量，获取所有有效选项的id集合（用useMemo优化性能，避免重复计算）：

import { useMemo } from 'react';

// 获取所有可用的有效选项ID
const allValidOptionIds = useMemo(() => {
  return issuesTypes.results
    .filter(iT => iT.isActive)
    .map(iT => iT.id);
}, [issuesTypes.results]);

然后修改onChange函数：

onChange={(selectedOptions, action) => {
  // 先过滤掉反向选择选项，确保它不会出现在已选预览里
  const filteredSelected = selectedOptions?.filter(opt => opt.value !== 'INVERT') || [];

  // 判断是不是触发了反向选择的操作
  if (action.action === 'select-option' && action.option.value === 'INVERT') {
    // 计算反向后的选中值：所有有效选项中，不在当前已选列表里的那些
    const invertedIds = allValidOptionIds.filter(id => !selectedCategoryOptions.includes(id));
    setSelectedCategoryOptions(invertedIds);
  } else {
    // 正常选择/取消选择的情况，直接更新选中值
    setSelectedCategoryOptions(filteredSelected.map(opt => opt.value));
  }
}}

第三步：优化自定义Option组件，避免反向选项被标记为已选 #

因为我们不希望这个选项被选中后显示灰色（或者出现在已选预览），除了上面的过滤，还可以在自定义的DefaultInputOption组件里加个判断：当选项是「反向选择」时，强制isSelected为false，同时去掉它的复选框，让它更像操作按钮：

const DefaultInputOption = ({
  getStyles,
  Icon,
  isDisabled,
  isFocused,
  isSelected,
  children,
  innerProps,
  data, // 新增data参数，用来判断当前选项的value
  ...rest
}) => {
  // 如果是反向选择选项，强制isSelected为false
  const adjustedIsSelected = data.value === 'INVERT' ? false : isSelected;
  
  const [isActive, setIsActive] = useState(false);
  const onMouseDown = () => setIsActive(true);
  const onMouseUp = () => setIsActive(false);
  const onMouseLeave = () => setIsActive(false);

  // styles
  let bg = "transparent";
  if (isFocused) bg = "#eee";
  if (isActive) bg = "#B2D4FF";
  const style = {
    alignItems: "center",
    backgroundColor: bg,
    color: "inherit",
    display: "flex ",
  };

  // prop assignment
  const props = {
    ...innerProps,
    onMouseDown,
    onMouseUp,
    onMouseLeave,
    style,
  };

  return (
    <components.Option
      {...rest}
      isDisabled={isDisabled}
      isFocused={isFocused}
      isSelected={adjustedIsSelected} // 使用调整后的选中状态
      getStyles={getStyles}
      innerProps={props}
    >
      {/* 反向选择选项不需要显示复选框 */}
      {data.value !== 'INVERT' && <input type="checkbox" checked={adjustedIsSelected} onChange={() => {}} />}
      {children}
    </components.Option>
  );
};

第四步：验证defaultValue逻辑 #

你的defaultValue逻辑是基于selectedCategoryOptions生成的，这个没问题——因为我们的selectedCategoryOptions里永远不会包含'INVERT'，所以defaultValue里也不会有这个选项，不用担心它出现在初始预览里。

把这些步骤整合后，你的组件就能完美实现反向选择的功能啦！

备注：内容来源于stack exchange，提问作者Gustavo da Costa e Silva