反应选择多值的自定义单标签？

Question

在

react-select

多选中选择选项时，默认行为是将下拉列表中的选项添加到输入中，并且所选选项将从菜单中消失。

如何防止所选选项消失以及如何将控制器中的默认所选选项元素替换为单个文本元素“n selected”。

我当前的反应选择：

<ReactSelect
  isMulti
  options={vSystems}
  getOptionLabel={(option) => option.name}
  getOptionValue={(option) => option.id}
  defaultValue={vSystems}
  onChange={(val) => setSelectedSystems(val)}
  className="my-react-select-container"
  classNamePrefix="my-react-select"
/>

Answer 1

由于这似乎仍然是一个悬而未决的问题，我想我会分享。

据我所知，没有内置的功能。然而，这可以通过多种行动来实现：

1. 为了防止所选选项消失，请使用

   hideSelectedOptions

   参数，is 应该为 false。

2. 要替换元素，您需要将自定义元素传递到

   components

   属性中。但是，没有用于选定选项包装的元素；每个选定选项都有一个，整个元素也有一个。替换后者会更准确，但是它也会删除几个 eventListener，因此我最终替换了前者 MultiValueContainer，并使其仅显示一次。

类似这样的东西（未正确测试）： 选择本身：

<Select
    classNamePrefix="qvDropdown"
    isMulti
    closeMenuOnSelect={false}
    options={myOptions}
    defaultValue={myDefaultValue}
    onChange={v => { console.log('selected', v) }}
    components={{
        Option: MultSelectorOption,
        ClearIndicator: null,
        MultiValueContainer: MultSelectorValue
    }}
    hideSelectedOptions={false}
    placeholder={t("all")}
    fullPlaceholder={t("xSelected")}
/>

和自定义组件：

export const MultSelectorValue = ({ selectProps, data }) => {
    const getVal = selectProps.getOptionValue;
    const selected = selectProps.value;
    const isFirst = getVal(data) == getVal(selected[0]);

    if(!isFirst)
        return null;

    const str = selected.length == selectProps.options.length ? selectProps.placeholder : (selected.length + " " + selectProps.fullPlaceholder);

    return (<div>{str}</div>);
}