如何让react-select选中项不应用formatOptionLabel的格式化效果？

要让选中项不使用下拉选项的带图片格式化样式，有两种简单的解决办法：

方法一：利用formatOptionLabel的context参数区分场景 #

react-select的formatOptionLabel函数支持第二个参数，其中的context字段会标识当前渲染的是下拉选项（值为option）还是选中项（值为value）。你只需修改格式化函数，根据场景返回不同内容：

const formatResult = (item: any, { context }: any) => {
  // 仅下拉选项显示带图片的布局
  if (context === 'option') {
    const imageurl = `https://mywebsite/${item.countrycode}.gif`;
    return (
      <div>
        <div className={styles.Optiontablerow}>
          <div className={styles.OptionImageCell}>
            <img src={imageurl} alt={item.label} />
          </div>
          <div className={styles.Optiontablecell}>{item.label}</div>
        </div>
      </div>
    );
  }
  // 选中项仅显示文字
  return item.label;
};

方法二：自定义选中项组件（适合复杂自定义场景） #

因为你开启了isMulti多选模式，可通过自定义MultiValue组件替换默认的选中项渲染逻辑：

1. 定义自定义多选选中项组件 #

const CustomMultiValue = ({ data, removeProps, ...rest }) => {
  return (
    <div {...rest}>
      <span>{data.label}</span>
      {/* 保留默认的删除按钮 */}
      <button {...removeProps}>×</button>
    </div>
  );
};

2. 在Select组件中配置自定义组件 #

<Select
  className="basic-single"
  classNamePrefix="Select"
  isClearable={true}
  isSearchable={true}
  isMulti
  value={this.state.myselectedvalue}
  options={this.state.myoptions}
  onChange={(value) => this.setState({ myselectedvalue: value })}
  isDisabled={this.state.Disabled}
  formatOptionLabel={formatResult}
  // 替换默认的多选选中项组件
  components={{ MultiValue: CustomMultiValue }}
/>

两种方法对比：方法一更简洁，适合快速区分场景；方法二灵活性更高，可对选中项做更多样式或交互定制。

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