React Select - 多选自定义方式来显示多个选项

Question

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

现在，选择了许多选项后，选择组件会占用某些 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 : false}
          isMulti
          options={colourOptions}
          onChange={this.handleChange}
          value={values}
          components={{ ValueContainer }}
        />
      </div>
    );
  }
}

export default CustomSelect;

const ValueContainer = ({ children, getValue, ...props }) => {
  let maxToShow = 3;
  var length = getValue().length;
  let displayChips = React.Children.toArray(children).slice(0, maxToShow);
  let shouldBadgeShow = length > maxToShow;
  let displayLength = length - maxToShow;

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && displayChips}
      <div className="root">
        {shouldBadgeShow &&
          `+ ${displayLength} item${length != 1 ? "s" : ""} selected`}
      </div>
    </components.ValueContainer>
  );
};

Answer 1

我个人会保留hideSelectedOptions={false}并进行styles属性使用（options更准确地说是属性）并设置display: 'none'不应该可见的属性：

const styles = {
    option: (base, value) => {
        return (shouldBeShown(value) ? { ...base } : { display: 'none'});
    }
};

shouldBeShown(value)是一个自定义函数，用于检查是否应显示特定选项。为了获取选项数据，您可以使用value.data.

然后就可以styles={styles}在Select组件中设置：

<Select
    hideSelectedOptions={false}
    isMulti
    styles={styles}
    onChange={this.handleChange}
    options={options}
    value={values}
    components={{ ValueContainer }}
/>