React Select选项显示图片，选中后仅展示文字的问题排查

问题根源 #

你使用的formatOptionLabel中的isSelected参数，仅用于标记下拉面板内选项是否处于选中状态，和选中后输入框的显示逻辑完全无关。所以靠这个判断控制图片显示是无效的——输入框的选中态内容是独立渲染的，不会触发该分支判断。

解决步骤 #

需要自定义SingleValue组件专门控制选中后的显示内容，同时保留formatOptionLabel处理下拉选项的图片+文字展示逻辑。

1. 优化选项数据（可选但推荐） #

将图片路径直接存入选项对象，避免每次渲染都调用find查找，提升性能：

const brandOptions = films.map((film) => ({
  value: film.brand,
  label: film.brand,
  brandpic: film.brandpic, // 把图片路径直接加入选项
}))

2. 定义自定义选中态组件 #

创建CustomSingleValue组件，仅渲染品牌名称：

const CustomSingleValue = ({ data }) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {data.label}
    </div>
  )
}

3. 简化formatOptionLabel逻辑 #

因为已将图片路径存入选项，直接使用即可，无需再判断isSelected：

const formatOptionLabel = ({ label, brandpic }) => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <img
      src={brandpic}
      alt={label}
      style={{ marginRight: '8px', width: '20px', height: '20px' }}
    />
    {label}
  </div>
)

4. 配置React Select组件 #

在组件中添加components属性，替换默认的SingleValue渲染逻辑：

<ReactSelect
  value={brandOptions.find((option) => option.value === selectedBrand)}
  onChange={handleBrandChange}
  options={brandOptions}
  placeholder="choose the brand"
  formatOptionLabel={formatOptionLabel}
  components={{ SingleValue: CustomSingleValue }} // 替换选中态显示组件
  className="bg-white ml-5 rounded-[40px] border-[#EBEBEB] shadow-sm w-[278px]"
/>

修改完成后，下拉选项会正常显示图片+品牌名称，选中后输入框仅展示品牌名称，完全符合需求。

内容的提问来源于stack exchange，提问作者Kasidetch Kongkaew