选择后如何在菜单中显示所选项目？

Question

我们有一个Select，用于在富文本编辑器中自定义样式。

我预计 showSelectedOptionsInMenu 组件会有类似 showSelectedOptionsInMenu 的道具或某种魔法道具。

react-select 的默认行为是从菜单中隐藏已经选择的项目（在isMulti 模式下），我希望以不同的方式显示选定的Options 样式并禁用。

没有错误消息。

我尝试搜索 React-Select 的文档，但没有发现任何有趣的内容。

我唯一能想到的就是重新实现 Menu 组件。这是正确的方法吗？

一段代码：

<Select
  options={opts}
  value={selectedStyle}
  isMulti={true}
  styles={selectStyles}
  placeholder="No Style"
  noOptionsMessage={({ inputValue }) =>
    intl.formatMessage(messages.allStylesApplied)
  }
  components={{
    // Shows the most relevant part of the selection as a simple string of text.
    MultiValue: (props) => {
      const val = props.getValue();

      if (props.index === 0) {
        const cond = val.length > 1;
        const lbl = val[props.index].label + '...';
        const lbl2 = val[props.index].label;
        return <>{cond ? lbl : lbl2}</>;
      }

      return '';
    },
  }}
  theme={(theme) => {
    return {
      ...theme,
      colors: {
        ...theme.colors,
        primary: '#826A6AFF', // 100% opaque @brown
        primary75: '#826A6Abf', // 75% opaque @brown
        primary50: '#826A6A7f', // 50% opaque @brown
        primary25: '#826A6A40', // 25% opaque @brown
      },
    };
  }}
  onChange={(selItem) => {
    setSelectedStyle(selItem);
    // toggleBlock(editor, 'style');
  }}
></Select>

谢谢。

Answer 1

有 a prop on the Select component，如果设置为 false，就会执行我想要的操作。