时间戳

首页 > 解决方案 > React Select - 多选自定义方式显示多个选项

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

问题描述

我正在寻找自定义多选以及我们创建显示所选选项的显示方式。

现在，在选择了许多选项的情况下，选择组件占用了某些 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>
  );
};

标签： reactjsselectdropdownreact-select

解决方案

我个人会保留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 }}
/>

推荐阅读