React select - 更改所选值的显示方式答案

【问题标题】：React select - change the way selected values are shownReact select - 更改所选值的显示方式
【发布时间】：2020-06-05 04:56:41
【问题描述】：

我在基于 ReactJs 的应用程序中使用 react select 控件。我将其用作多选控件。但是一旦用户选择了多个值，而不是显示所有选定的值，我想显示第一个选定的值 + N。所以如果选择了两个值，我想说'XYZ'+ 1。如果只有一个值被选中我会说'XYZ'。这是一个有效的example

【问题讨论】：

如何确定+ N？如果用户选择选项 1，然后还选择选项 3，是否显示选项 1、2 和 3？或者如果他们也选择了选项 3，您只显示选项 1 和 2？您的预期结果可以使用更多细节。
React-select 将仅显示您提供的数组中可用的标签。
@DrewReese:如果用户选择Option 1，由于这是唯一选择的项目，我们将显示选项1作为选择的值。现在如果用户选择Option 3，我们将显示Option 1 + 1，因为我们有两个选定的项目在控制中。如果用户选择Option 6，我们将显示Option 1 + 2，因为我们控制了三个选定的项目。

标签： javascript reactjs react-select

【解决方案1】：

您需要像下面那样覆盖 ValueContainer。工作sandbox

const ValueContainer = props => {
  let length = props.getValue().length;

  return (
    <components.ValueContainer {...props}>
      {length > 1 ? (
        <>
          {props.children[0][0]}
          {!props.selectProps.menuIsOpen && `${length - 1} Items`}
          {React.cloneElement(props.children[1])}
        </>
      ) : (
        <>{props.children}</>
      )}
    </components.ValueContainer>
  );
};

在选择中你需要覆盖

<Select
 components={{ValueContainer}}
 hideSelectedOptions={false}
 ...
/>

【讨论】：

支持解决方案。但是现在，我们如何删除一些选定的值？
您可以避免隐藏选定的值，以便选定的值在下拉列表中可供取消选择。 ``` ``` 也更新了沙箱。
你能解释一下ValueContainer里面发生了什么