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

【问题标题】：React Select - Multi Select custom way to display multiple optionsReact Select - 多选自定义方式显示多个选项
【发布时间】：2020-03-11 03:23:01
【问题描述】：

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

现在，在选择了许多选项后，选择组件会为某些 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>
  );
};

【问题讨论】：

有什么解决办法吗？也在找。
@jpcmf80 stackoverflow.com/a/65342821/1133169

标签： reactjs select dropdown react-select

【解决方案1】：

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

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

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

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

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

【讨论】：