Reactjs 添加选项时停止反应选择不展开

因此，我正在研究是否可能对需要多重选择的项目使用react select。但是，随着选择的项目越来越多，“多重选择”将继续向下扩展。如果下拉列表有一系列选项可供选择（比如100个），那么这将不起作用。在react select库中是否有方法将值设置为“Xyz&5 more”或类似值

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'foo', label: 'Foo' },
  { value: 'bar', label: 'Bar' }
]

const MyComponent = () => (
  <Select
    options={options}
    isMulti
    className="basic-multi-select"
    classNamePrefix="select"
  />
)

import React，{Component}来自“React”
从“反应选择”导入选择
常量选项=[
{值：'chocolate'，标签：'chocolate'}，
{值：'草莓'，标签：'草莓'}，
{值：'香草'，标签：'香草'}，
{值：'cherry'，标签：'cherry'}，
{值：'foo'，标签：'foo'}，
{值：'bar'，标签：'bar'}
]
常量MyComponent=（）=>(
)

您可以使用覆盖

ValueContainer

组件，该组件以徽章形式保存选定的值

const ValueContainer = ({ children, getValue, ...props }) => {
  var values = getValue();
  var valueLabel = "";

  if (values.length > 0) valueLabel += props.selectProps.getOptionLabel(values[0]);
  if (values.length > 1) valueLabel += ` & ${values.length - 1} more`;

  // Keep standard placeholder and input from react-select
  var childsToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && valueLabel }
      { childsToRender }
    </components.ValueContainer>
  );
};

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

constvaluecontainer=（{children，getValue，…props}）=>{
var values=getValue（）；
var valueLabel=“”；
如果（values.length>0）valueLabel+=props.selectProps.getOptionLabel（值[0]）；
如果（values.length>1）valueLabel+=`&${values.length-1}更多`；
//保留标准占位符和react select中的输入
var childsToRender=React.Children.toArray（Children）.filter（（child）=>['Input'，'DummyInput'，'Placeholder'].indexOf（child.type.name）>=0）；
返回(
{！props.selectProps.inputValue&&valueLabel}
{childsToRender}
);
};

请注意，

Input

（或

DummyInput

）组件的过滤和包含：没有它，

Select

组件的基本功能（如焦点等）将丢失。 还可以将

hideSelectedOptions

prop设置为

false

，以便取消选择所选选项

---

可以查看一个功能示例。

您能否提供如何使用它的代码？所以，我们可以帮助您。@SathvikChinnu我链接到我正在使用的示例，但还行。这个解决方案非常好，尽管它不适合移动视图，在移动视图中元素会垂直展开