Reactjs 如何使用react select v2呈现所选项目的数量

我使用的是版本2，但我很难更改多重选择的自定义行为。我想显示所选项目的数量，而不是所选项目的列表。 我的意思不是这样：

我想要这个：

任何帮助都将不胜感激

---

谢谢…

您可以使用自定义

组件来执行以下操作：

使用@lisdey89打开菜单行为更新

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue } = props;
  const nbValues = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${nbValues} items selected`}
    </components.ValueContainer>
  );
};
const options = [
  { label: "label 1", value: 1 },
  { label: "label 2", value: 2 },
  { label: "label 3", value: 3 },
  { label: "label 4", value: 4 }
];
function App() {
  const components = { ValueContainer };
  return <Select isMulti components={components} options={options} />;
}

constvaluecontainer=（{children，…props}）=>{
const{getValue，hasValue}=props；
const nbValues=getValue（）.length；
如果（！hasValue）{
返回(
{儿童}
);
}
返回(
{`${nbValues}项已选定`}
);
};
常量选项=[
{label:“label 1”，值：1}，
{label:“label 2”，值：2}，
{label:“label 3”，值：3}，
{label:“label 4”，值：4}
];
函数App（）{
const components={ValueContainer}；
返回；
}

这里有一个。
在我根据@Laura的答案继续搜索之后，我最终得到了这个解决方案，以显示所选项目的数量，并保持ValueContainer的默认行为，也许其他人会发现它很有用：

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue } = props;
  const nbValues = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {
        `${nbValues} items selected`
      }
    </components.ValueContainer>
  );
};

constvaluecontainer=（{children，…props}）=>{
const{getValue，hasValue}=props；
const nbValues=getValue（）.length；
如果（！hasValue）{
返回(
{儿童}
);
}
返回(
{
`${nbValues}项已选定`
}
);
};

这里有一个
不错，但在您的示例中，单击标签后不会显示下拉列表，只有在您单击箭头时才会显示。你想过吗？谢谢！我将尝试一下，但是正如@only_one所指出的，默认的onClick行为不再有效。有什么想法吗？当
isMulti
设置为true时，clickaway无法关闭