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

Question

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

目前，selected 有许多选项，select 组件占用了某些 UI 的 space 数量过高。参见示例：

我想在输入中使用开箱即用的芯片显示 selected 选项，但我只想显示几个 selected 选项（比如 3/最多 4 个），然后为输入值容器中未显示的 selected 选项的数量添加一个 "badge" 计数。 selected 但超过允许在输入中显示的最大筹码数量的选项应在下拉列表中显示为 selected，而显示值的筹码应 not 显示在我们的下拉列表中。

我已经通过使用自定义 ValueContainer 仅显示前几个芯片 select 离子，然后添加额外的 /"overflow" select离子。我不确定如何利用道具 hideSelectedOptions 来实现这一点，以在列表中显示 selected 项目 only 当我的最大值被满足而不显示所有因为这个道具需要一个布尔值。

这是我目前的情况：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.

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

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

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

React Select - Multi Select custom way to display multiple options

select

reactjs

react-select

dropdown