選擇后如何在菜單中顯示所選項目？

Question

我們在富文本編輯器中有一個用於可自定義樣式的Select 。

我希望Option組件有類似showSelectedOptionsInMenu道具或某種魔法道具。

react-select 的默認行為是從菜單中隱藏已選擇的項目（在isMulti模式下），我希望以不同的方式顯示所選的Option樣式並禁用。

沒有錯誤消息。

我試圖搜索 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

Select 組件上有一個道具，如果設置為 false，就會執行我想要的操作。