如何在React Select中保留占位符并追加至选中值？

我需要实现一个React Select组件，要求未选中时显示占位符“Selected Value: ”，选中选项后，显示内容为“Selected Value: 【选中值】”（比如选中值1时显示“Selected Value: 1”），同时不能直接修改选项的label字段。现有代码如下：

import Select from "react-select";

export default function App() {
  const options = [
    { value: 1, label: 1 },
    { value: 2, label: 2 },
    { value: 3, label: 3 },
    { value: 4, label: 4 }
  ];
  const placeholder = "Selected Value: ";
  return (
    <div className="App">
      <Select options={options} placeholder={placeholder} />
    </div>
  );
}

解决方案 #

可以通过自定义React Select的SingleValue组件实现需求，具体步骤如下：

1. 从react-select中导入components对象，用于自定义选中值的渲染逻辑
2. 自定义CustomSingleValue组件，在选中选项的label前拼接占位符文本
3. 将自定义组件传入Select的components属性，未选中时仍保留原占位符显示

修改后的完整代码：

import Select, { components } from "react-select";

export default function App() {
  const options = [
    { value: 1, label: 1 },
    { value: 2, label: 2 },
    { value: 3, label: 3 },
    { value: 4, label: 4 }
  ];
  const placeholder = "Selected Value: ";

  // 自定义选中值渲染组件
  const CustomSingleValue = ({ children, ...props }) => {
    return (
      <components.SingleValue {...props}>
        {placeholder} {children}
      </components.SingleValue>
    );
  };

  return (
    <div className="App">
      <Select 
        options={options} 
        placeholder={placeholder} 
        components={{ SingleValue: CustomSingleValue }} 
      />
    </div>
  );
}

说明 #

• 未选中状态下，组件依然显示原占位符“Selected Value: ”
• 选中选项后，自定义组件自动将占位符与选中值的label拼接显示，无需修改原选项的label字段
• 该方案完全遵循React Select的自定义API，不会破坏组件原有逻辑

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