如何实现React-select选中选项后动态修改标签仅保留区号

你可以通过以下两种方式实现选中项与下拉选项的差异化显示：

方法一：使用formatOptionLabel属性（推荐） #

formatOptionLabel支持根据选项的状态（是否被选中）返回不同的显示内容，无需自定义组件，代码更简洁：

<Select
  options={countryProvinceCityList}
  value={telCtryObj}
  onChange={handleTelCountryChange}
  getOptionValue={(x) => x.telCode}
  formatOptionLabel={(option, context) => {
    // 选中状态下仅显示+区号
    if (context.isSelected) {
      return `+${option.telCode}`;
    }
    // 下拉选项保持原有格式
    return '+' + _.padEnd(option.telCode, 5, '\u2007') + option.desc;
  }}
/>

方法二：自定义SingleValue组件 #

通过重写React-select的SingleValue组件，单独控制选中项的显示样式：

1. 先定义自定义的选中项组件：

const CustomSingleValue = ({ data }) => {
  return <span>+{data.telCode}</span>;
};

2. 在Select组件中引入该组件：

<Select
  options={countryProvinceCityList}
  value={telCtryObj}
  onChange={handleTelCountryChange}
  getOptionValue={(x) => x.telCode}
  getOptionLabel={(x) => '+' + _.padEnd(x.telCode, 5, '\u2007') + x.desc}
  // 指定自定义的选中项渲染组件
  components={{ SingleValue: CustomSingleValue }}
/>

两种方法都能实现需求：下拉选项保持+{ctryCode}{ctryName}的格式，选中后仅显示+{ctryCode}。

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