点击按钮为CreatableSelect添加新值并隐藏创建提示

实现步骤 #

1. 通过ref获取CreatableSelect实例，用于读取输入值和操作组件
2. 编写外部按钮点击事件，创建新选项并更新组件的options与选中值
3. 过滤掉默认的“create "text"”提示选项

完整代码示例 #

import { useState, useRef } from 'react';
import CreatableSelect from 'react-select/creatable';

const YourComponent = () => {
  const [options, setOptions] = useState([
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' }
  ]);
  const [value, setValue] = useState([]);
  const selectRef = useRef(null);

  // 外部按钮点击事件：创建新选项
  const handleCreateOption = () => {
    const inputValue = selectRef.current?.inputValue;
    if (!inputValue.trim()) return;

    const newOption = { value: inputValue, label: inputValue };
    // 避免添加重复选项
    if (!options.some(opt => opt.value === inputValue)) {
      setOptions(prev => [...prev, newOption]);
      setValue(prev => [...prev, newOption]);
    }
    // 清空输入框
    selectRef.current?.clearValue();
  };

  return (
    <>
      <CreatableSelect
        ref={selectRef}
        isMulti
        options={options}
        value={value}
        isClearable={false}
        onChange={setValue}
        components={{
          DropdownIndicator: () => null,
          IndicatorSeparator: () => null
        }}
        // 过滤默认的创建提示选项
        filterOptions={(optionsList) => {
          return optionsList.filter(opt => !opt.__isNew__);
        }}
      />
      <span className="add-btn" onClick={handleCreateOption}>
        <i className="bi bi-plus"></i>
      </span>
    </>
  );
};

export default YourComponent;

关键说明 #

• ref的作用：通过selectRef获取组件实例，读取输入框内容并调用clearValue方法清空输入
• 创建选项逻辑：先校验输入值非空，再检查选项是否已存在，避免重复添加，最后同步更新选项列表和选中值
• 隐藏默认提示：利用filterOptions过滤掉CreatableSelect自动生成的、带有__isNew__标记的创建选项，彻底移除默认提示

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