为React-Select CreatableSelect多选文本输入组件添加粘贴批量导入功能

没问题，这个功能可以通过监听粘贴事件来实现，我帮你修改组件代码，直接就能满足需求～

核心思路是：当用户粘贴内容时，捕获粘贴的文本，按逗号拆分后过滤掉无效项和重复项，再把它们转换成组件需要的Option格式添加到现有选项中。

以下是修改后的完整组件代码，我标注了新增的部分：

import React, {KeyboardEventHandler} from 'react';
import CreatableSelect from 'react-select/creatable';
import { ActionMeta, OnChangeValue } from 'react-select';

const MultiSelectTextInput = (props) => {
  const components = {
    DropdownIndicator: null,
  };

  interface Option {
    readonly label: string;
    readonly value: string;
  }

  const createOption = (label: string) => ({
    label,
    value: label,
  });

  const handleChange = (value: OnChangeValue<Option, true>, actionMeta: ActionMeta<Option>) => {
    console.group('Value Changed');
    console.log(value);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
    props.setValue(value);
  };

  const handleInputChange = (inputValue: string) => {
    props.setInputValue(inputValue);
  };

  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
    if (!props.inputValue) return;
    switch (event.key) {
      case 'Enter':
      case 'Tab':
        if (props.value.map(v => v.label).includes(props.inputValue)) {
          console.log('Value Already Exists!')
          props.setInputValue('');
        } else {
          console.group('Value Added');
          console.log(props.value);
          console.groupEnd();
          props.setInputValue('');
          props.setValue([...props.value, createOption(props.inputValue)])
        }
        event.preventDefault();
    }
  };

  // 新增：处理粘贴事件的函数
  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
    // 获取粘贴的文本内容
    const pastedText = event.clipboardData.getData('text');
    // 按逗号拆分，去除每个项的前后空格，过滤空字符串
    const newItems = pastedText.split(',')
      .map(item => item.trim())
      .filter(item => item.length > 0);
    
    if (newItems.length === 0) return;

    // 获取已存在的标签列表，用于去重
    const existingLabels = props.value.map(v => v.label);
    // 过滤掉已存在的项，转换成Option格式
    const newOptions = newItems
      .filter(item => !existingLabels.includes(item))
      .map(item => createOption(item));

    if (newOptions.length > 0) {
      // 合并现有选项和新选项
      props.setValue([...props.value, ...newOptions]);
    }

    // 清空输入框，阻止默认粘贴行为
    props.setInputValue('');
    event.preventDefault();
  };

  return (
    <CreatableSelect
      id={props.id}
      instanceId={props.id}
      className="w-100"
      components={components}
      inputValue={props.inputValue}
      isClearable
      isMulti
      menuIsOpen={false}
      onChange={handleChange}
      onInputChange={handleInputChange}
      onKeyDown={handleKeyDown}
      // 新增：绑定粘贴事件
      onPaste={handlePaste}
      placeholder={props.placeholder}
      value={props.value}
    />
  );
};

export default MultiSelectTextInput;

关键步骤说明： #

• 捕获粘贴内容：通过event.clipboardData.getData('text')获取用户粘贴的纯文本内容。
• 拆分与清洗：用split(',')拆分文本，然后trim()去除每个项的前后空格，filter()过滤掉空字符串，避免添加无效选项。
• 去重处理：对比当前已有的选项标签，只添加不存在的项，防止重复。
• 更新状态：把新的选项转换成组件需要的Option格式，合并到现有选项数组中，同时清空输入框并阻止默认粘贴行为（避免内容直接粘贴到输入框里）。

你原来的页面调用代码不需要任何修改，直接使用这个组件就能实现粘贴“123,456,789”自动生成三个独立选项的功能啦～

内容的提问来源于stack exchange，提问作者Ahmet Firat Keler