React Select组件添加选项范围选择功能求助

要实现按住SHIFT键选中两个选项时自动选中中间所有条目，你需要调整原代码的几个核心逻辑，以下是修复后的完整实现：

import React, { useState, useEffect, useRef } from "react";
import Select from "react-select";
import components from "react-select/components";

const CustomOption = ({ children, option, index, ...props }) => {
  // 给每个自定义选项添加索引属性
  return (
    <components.Option {...props} data-option-index={index}>
      {children}
    </components.Option>
  );
};

const AramaSelect = ({ data, insertValues, name, label }) => {
  // 先排序数据，避免后续范围计算出错
  const sortedData = [...data].sort((a, b) => {
    const labelA = a.label.toLowerCase();
    const labelB = b.label.toLowerCase();
    return labelA.localeCompare(labelB);
  });

  const [selectedOptions, setSelectedOptions] = useState([]);
  const [menuIsOpen, setMenuIsOpen] = useState(false);
  const lastSelectedIndexRef = useRef(null); // 记录上一次选中的选项索引
  const isShiftPressedRef = useRef(false); // 记录Shift键是否按住

  // 监听Shift键的按下和抬起状态
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "Shift") {
        isShiftPressedRef.current = true;
      }
    };

    const handleKeyUp = (e) => {
      if (e.key === "Shift") {
        isShiftPressedRef.current = false;
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  const handleChange = (newSelectedOptions) => {
    setSelectedOptions(newSelectedOptions);
    const values = newSelectedOptions.map(item => item.value);
    insertValues(name, values);
  };

  const handleOptionClick = (option, meta) => {
    if (!isShiftPressedRef.current || lastSelectedIndexRef.current === null) {
      // 非Shift点击，正常选中/取消
      const optionIndex = sortedData.findIndex(opt => opt.value === option.value);
      lastSelectedIndexRef.current = optionIndex;
      return;
    }

    // Shift点击时计算范围
    const currentIndex = sortedData.findIndex(opt => opt.value === option.value);
    const startIndex = Math.min(lastSelectedIndexRef.current, currentIndex);
    const endIndex = Math.max(lastSelectedIndexRef.current, currentIndex);

    // 获取范围内的所有选项
    const rangeOptions = sortedData.slice(startIndex, endIndex + 1);
    
    // 合并已选中的选项（去重）
    const mergedOptions = [...new Set([...selectedOptions, ...rangeOptions])];
    // 保持排序
    const sortedMerged = mergedOptions.sort((a, b) => {
      const labelA = a.label.toLowerCase();
      const labelB = b.label.toLowerCase();
      return labelA.localeCompare(labelB);
    });

    setSelectedOptions(sortedMerged);
    lastSelectedIndexRef.current = currentIndex;
    // 阻止默认的单选/取消行为
    meta.action("preventDefault");
  };

  useEffect(() => {
    const values = selectedOptions.map(item => item.value);
    insertValues(name, values);
  }, [selectedOptions, insertValues, name]);

  return (
    <div style={{ width: 800, margin: "20px 0" }}>
      <Select
        options={sortedData}
        isClearable
        isMulti
        menuIsOpen={menuIsOpen}
        onMenuOpen={() => setMenuIsOpen(true)}
        onMenuClose={() => setMenuIsOpen(false)}
        onChange={handleChange}
        value={selectedOptions}
        placeholder={label}
        components={{ Option: CustomOption }}
        onOptionClick={handleOptionClick}
      />
    </div>
  );
};

export default AramaSelect;

关键修改说明： #

1. 自定义Option组件：给每个选项添加data-option-index属性，确保能获取到选项在排序后数组中的位置。
2. Shift键状态跟踪：用useRef记录Shift键的按下/抬起状态，避免 useState 带来的渲染延迟。
3. 范围计算逻辑：在onOptionClick事件中，当Shift键按住且存在上一次选中索引时，计算起始和结束索引，批量选中范围内的所有选项。
4. 去重与排序：合并选中选项时用Set去重，保持选项排序一致，避免显示混乱。
5. 阻止默认行为：Shift点击时阻止react-select的默认选中逻辑，确保范围多选生效。

内容的提问来源于stack exchange，提问作者Omar Dak Elbab