Question

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

现在，在选择了许多选项的情况下，select组件用于某些UI的空间过大。参见示例：

我想利用开箱即用的芯片显示输入中的选定选项，但是我只想只显示几个选定的选项（例如3/4 max），然后为它添加一个“徽章”计数输入中值容器中未显示的所选选项的数量。所选但超出输入允许的最大筹码数量的选项应在下拉列表中显示为已选择，而确实显示值的筹码应在我们的下拉列表中 not 显示。

我已经通过使用自定义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 }}
/>

Answer 2

由于某种原因，根本不起作用。请指教。

我拥有的方法名称是ValueLimitContainer。

Code Sandbox Link

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

2 个答案: