小编use*_*250的帖子

我希望自定义多选以及我们创建显示所选选项的显示方式。

现在，选择了许多选项后，选择组件会占用某些 UI 的大量空间。见示例：

我想对输入中的选定选项使用开箱即用的芯片显示，但我只想显示几个选定的选项（例如最大 3/4），然后添加一个“徽章”计数未显示在输入值容器中的选定选项。被选中，但该选项是过去的允许显示的下拉列表中选定的输入应显示芯片的最大数量，而做节目的价值观芯片应该不会在我们的下拉列表中显示。

我已经通过使用自定义ValueContainer仅显示前几个芯片选择，然后添加了额外/“溢出”选择的计数来实现了其中的一部分。我不确定如何利用道具hideSelectedOptions来实现这一点，仅在达到我的最大值时才显示列表中的选定项目，而不显示所有项目，因为该道具采用布尔值。

这是我到目前为止所拥有的：https : //codesandbox.io/s/custom-react-select-sjtib

import React, { Component } from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";
import "./example.css";

class CustomSelect extends Component {
  state = {
    values: []
  };

  handleChange = values => {
    this.setState({ values });
  };

  render() {
    const { values } = this.state;
    return (
      <div>
        <Select
          hideSelectedOptions={values.length < 3 ? true …