react-select/creatable多选设置isClearable={true}无法清空内容求助

你的代码存在3处核心逻辑错误，直接导致清空功能完全失效：

• tagValue初始值类型错误：isMulti多选模式下，组件要求绑定的value为数组类型，你将初始值设为空字符串''，会导致react-select内部判断已选项状态、执行清空逻辑时出现类型不匹配问题
• handleChange方法逻辑缺失：你在onChange回调中仅处理了field === 'roles'的分支，完全没有处理tags字段的状态更新。无论是点击全局清除按钮、还是删除单个已选项，触发的onChange事件都不会同步更新tagValue状态，视图自然不会发生变化
• 自定义按键逻辑未保留默认交互：你编写的onKeyDown方法没有对非回车/Tab的按键做放行处理，会干扰react-select原生的退格删除标签等交互逻辑

• 将tagValue初始值修改为空数组[]，匹配多选模式的value类型要求
• 补全handleChange中tags字段的更新逻辑：组件触发清空操作时onChange会返回null，直接将值同步到状态即可，删除单个选项时onChange会返回剩余选项组成的新数组，无需额外处理
• 调整onKeyDown逻辑，仅拦截回车、Tab键的默认事件，其余按键保留组件原生交互，不做额外拦截
• 现有components配置仅移除了下拉指示器，不会影响清除按钮的正常渲染，无需额外调整

import React, { useState } from 'react'
import Creatable from 'react-select/creatable'

const Register = props => {
  const [tagInputValue, setTagInputValue] = useState('')
  // 修正：多选值初始化为空数组
  const [tagValue, setTagValue] = useState([])

  const handleChange = (field, value) => {
    switch (field) {
      case 'roles':
        setRoleValue(value)
        break
      // 补全tags字段更新逻辑，清空时value为null，兜底赋值为空数组
      case 'tags':
        setTagValue(value || [])
        break
      default:
        break
    }
  }

  const handleKeyDown = event => {
    if (!tagInputValue) return
    switch (event.key) {
      case 'Enter':
      case 'Tab':
        setTagValue([...tagValue, createOption(tagInputValue)])
        setTagInputValue('')
        event.preventDefault()
        break
      default:
        // 其余按键走组件默认逻辑，不做拦截
        break
    }
  }

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

  const handleInputChange = (value) => {
    setTagInputValue(value)
  }
  return (
    <div className='container'>
          <Creatable
            isClearable={true}
            isMulti
            components={{ DropdownIndicator: null }}
            inputValue={tagInputValue}
            menuIsOpen={false}
            onChange={(value) => handleChange('tags', value)}
            placeholder='请输入标签'
            onKeyDown={handleKeyDown}
            onInputChange={handleInputChange}
            value={tagValue}
          />
        </div>)
}

修复完成后可实现所有预期交互：

• 组件右侧正常显示全局清除按钮，点击可一键清空所有已选标签
• 单个标签右侧的关闭按钮可正常点击，删除对应选项
• 输入框无输入内容时按退格键，可自动删除最后一个已选标签
• 原有输入内容后按回车/Tab创建新标签的逻辑不受影响

内容的提问来源于stack exchange，提问作者Moufid sgh