如何在React-Select输入中添加永久标签？

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

const PermanentTagsSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleInputChange = (inputValue) => {
    // 处理用户输入的逻辑，例如从后端获取匹配的选项
  };

  const handleOptionSelect = (option) => {
    // 处理选项选择的逻辑，例如将选项添加到selectedOptions中
    setSelectedOptions([...selectedOptions, option]);
  };

  const handleTagRemove = (removedTag) => {
    // 处理标签移除的逻辑，例如从selectedOptions中移除对应的标签
    setSelectedOptions(selectedOptions.filter(tag => tag.value !== removedTag.value));
  };

  const options = [
    // 这里是你的选项列表，可以是静态的或者从后端动态获取
  ];

  const tagOptions = selectedOptions.map(tag => ({
    label: tag.label,
    value: tag.value,
    isFixed: true, // 添加一个isFixed属性，用于标识永久标签
  }));

  return (
    <Select
      options={options}
      isMulti
      isClearable
      inputValue={''}
      onInputChange={handleInputChange}
      onChange={handleOptionSelect}
      value={tagOptions}
      isOptionDisabled={(option) => option.isFixed} // 禁用永久标签的选项
      closeMenuOnSelect={false} // 允许多选
      hideSelectedOptions={false} // 显示已选中的选项
      components={{
        MultiValueRemove: ({ innerProps, data }) => (
          <span {...innerProps} onClick={() => handleTagRemove(data)}>
            &times;
          </span>
        ),
      }}
    />
  );
};

export default PermanentTagsSelect;

import React from 'react';
import PermanentTagsSelect from './PermanentTagsSelect';

const App = () => {
  const options = [
    // 这里是你的选项列表，可以是静态的或者从后端动态获取
  ];

  return (
    <div>
      <h1>React-Select with Permanent Tags</h1>
      <PermanentTagsSelect options={options} />
    </div>
  );
};

export default App;