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

Question

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

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

react-select 的默认行为是从菜单中隐藏已经 selected 的项目（在 isMulti 模式下），我希望显示 selected 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，它会执行我想要的操作。

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

How to display selected items in the menu as well, after they have been selected?

javascript

reactjs

react-select