如何使用 react-select 呈现“N 个选定项目”而不是 N 个选定项目的列表

Question

我正在考虑使用react-select作为城市选择器的选择器，用户可以选择 1 个或多个城市来过滤一些数据。 这是它在我的页面中呈现的屏幕截图：

城市列表可能很大，如果一次选择大量数字，我不希望选择器超出其蓝色容器。 这是我现在模拟时会发生的情况：

我不是那个超级粉丝！ 我能想到的一种替代方法是呈现“选定的 4 个城市”而不是整个列表。 这将在页面上具有可预测的大小。

如何使用react-select做到这一点？

Answer 1

注意：此答案适用于 react-select v1。 有关 v3 的解决方案，请参阅NearHuscarl的答案。

渲染“选择了 N 个项目”

这可以通过valueRenderer和className道具以及最少量的 CSS 来实现。

在这里，我正常显示前三个选择，然后在选择了 4 个以上的项目时显示“选择 N 个项目”。 除了“选择了 N 个项目”之外，显示删除选择图标 (×) 是没有意义的，所以我也删除了它（使用 CSS）。

 class App extends React.Component { state = { value: [], } className = () => { const baseClassName = 'my-react-select'; if (this.state.value.length <= 3) { return baseClassName; } return `${baseClassName} ${baseClassName}--compact`; } handleChange = (value) => { this.setState({ value }); } renderValue = (option) => { // The first three selections are rendered normally if (this.state.value.length <= 3) { return option.label; } // With more selections, render "N items selected". // Other than the first one are hidden in CSS. return <span>{this.state.value.length} items selected</span>; } render() { return ( <Select className={this.className()} multi onChange={this.handleChange} options={[ { value: 'zero', label: 'Zero' }, { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, { value: 'four', label: 'Four' }, { value: 'five', label: 'Five' }, { value: 'six', label: 'Six' }, { value: 'seven', label: 'Seven' }, { value: 'eight', label: 'Eight' }, { value: 'nine', label: 'Nine' }, ]} value={this.state.value} valueRenderer={this.renderValue} /> ); } } ReactDOM.render(<App />, document.getElementById('root'));

 .my-react-select { /* Custom styles */ } .my-react-select--compact .Select-value:first-child { font-style: italic; } .my-react-select--compact .Select-value:first-child .Select-value-icon, .my-react-select--compact .Select-value:nth-child(n+2) { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script> <script src="https://unpkg.com/classnames@2.2.5/index.js"></script> <script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script> <script src="https://unpkg.com/react-select@1.3.0/dist/react-select.js"></script> <link rel="stylesheet" href="https://unpkg.com/react-select@1.3.0/dist/react-select.css"> <div id="root"></div>

---

替代方法

查看您的屏幕截图，似乎有空间可以显示最多四个选择，而不会使选择器溢出。 Instead of showing "N items selected" when 4+ cities have been selected, you could show the first 3 selections normally and then "+N more." 像这样：

• 城市A
• A市、B市
• A市、B市、C市
• A 市、B 市、C 市和其他 1 家
• 城市 A、城市 B、城市 C，+ 2 更多
• A 市、B 市、C 市和其他 3 家
• 等。

从 UX 的角度来看，我认为正常显示前 3 个左右的选择是好的。 如果在第 4 个城市被选中后，每个选项突然隐藏在文本“4 项已选中”后面，这很令人困惑。

此解决方案与第一个解决方案非常相似。 className道具现在只是一个字符串。 renderValue方法和 CSS 选择器有点不同。

 class App extends React.Component { state = { value: [], } handleChange = (value) => { this.setState({ value }); } renderValue = (option) => { // The first three values are rendered normally if (this.state.value.indexOf(option) < 3) { return option.label; } // Render the rest as "+ N more". // Other than the first one are hidden in CSS. return <span>+ {this.state.value.length - 3} more</span>; } render() { return ( <Select className='my-react-select' multi onChange={this.handleChange} options={[ { value: 'zero', label: 'Zero' }, { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, { value: 'four', label: 'Four' }, { value: 'five', label: 'Five' }, { value: 'six', label: 'Six' }, { value: 'seven', label: 'Seven' }, { value: 'eight', label: 'Eight' }, { value: 'nine', label: 'Nine' }, ]} value={this.state.value} valueRenderer={this.renderValue} /> ); } } ReactDOM.render(<App />, document.getElementById('root'));

 /* If you change the amount of how many selections are shown normally, * be sure to adjust these selectors accordingly. */ .my-react-select .Select-value:nth-child(4) { font-style: italic; } .my-react-select .Select-value:nth-child(4) .Select-value-icon, .my-react-select .Select-value:nth-child(n+5) { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script> <script src="https://unpkg.com/classnames@2.2.5/index.js"></script> <script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script> <script src="https://unpkg.com/react-select@1.3.0/dist/react-select.js"></script> <link rel="stylesheet" href="https://unpkg.com/react-select@1.3.0/dist/react-select.css"> <div id="root"></div>

---

这是显示选择的另一种方法：

• 城市A
• A市、B市
• A市、B市、C市
• A市、B市、C市、D市
• 城市 A、城市 B、城市 C，+ 2 更多
• A 市、B 市、C 市和其他 3 家
• 等。

从用户体验的角度来看，显示“+ 1 more”而不是显示价值有点愚蠢，所以在我看来这是最好的选择。

renderValue方法再次有点不同。 CSS 选择器现在有点丑陋和复杂，但它们可以工作。

 class App extends React.Component { state = { value: [], } handleChange = (value) => { this.setState({ value }); } renderValue = (option) => { // The first four values are rendered normally if (this.state.value.length <= 4) { return option.label; } // The first 3 values are rendered normally when // more than 4 selections have been made if (this.state.value.indexOf(option) < 3) { return option.label; } // Render the rest as "+ N more". // Other than the first one are hidden in CSS. return <span>+ {this.state.value.length - 3} more</span>; } render() { return ( <Select className='my-react-select' multi onChange={this.handleChange} options={[ { value: 'zero', label: 'Zero' }, { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, { value: 'three', label: 'Three' }, { value: 'four', label: 'Four' }, { value: 'five', label: 'Five' }, { value: 'six', label: 'Six' }, { value: 'seven', label: 'Seven' }, { value: 'eight', label: 'Eight' }, { value: 'nine', label: 'Nine' }, ]} value={this.state.value} valueRenderer={this.renderValue} /> ); } } ReactDOM.render(<App />, document.getElementById('root'));

 /* If you change the amount of how many selections are shown normally, * be sure to adjust these selectors accordingly. */ .my-react-select .Select-value:nth-child(4):not(:nth-last-child(2)) { font-style: italic; } .my-react-select .Select-value:nth-child(4):not(:nth-last-child(2)) .Select-value-icon, .my-react-select .Select-value:nth-child(n+5) { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script> <script src="https://unpkg.com/classnames@2.2.5/index.js"></script> <script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script> <script src="https://unpkg.com/react-select@1.3.0/dist/react-select.js"></script> <link rel="stylesheet" href="https://unpkg.com/react-select@1.3.0/dist/react-select.css"> <div id="root"></div>

Answer 2

这是我使用react-select 3.x 更新的答案。 不涉及css。 我用我的自定义多值消息覆盖ValueContainer的孩子。 在此之前，您需要导入以下内容

import React from "react";
import Select, { components } from "react-select";

变体 1

显示通用消息： n items selected

<Select
  ...
  isMulti
  closeMenuOnSelect={false}
  hideSelectedOptions={false}
  components={{
    ValueContainer: ({ children, ...props }) => {
      let [values, input] = children;

      if (Array.isArray(values)) {
        const plural = values.length === 1 ? "" : "s";
        values = `${values.length} item${plural} selected`;
      }

      return (
        <components.ValueContainer {...props}>
          {values}
          {input}
        </components.ValueContainer>
      );
    }
  }}
/>

结果

变体2

在显示通用消息之前显示一些命名项目： item1, item2, item3 and n others selected

<Select
  ...
  isMulti
  closeMenuOnSelect={false}
  hideSelectedOptions={false}
  components={{
    ValueContainer: ({ children, ...props }) => {
      let [values, input] = children;

      if (Array.isArray(values)) {
        const val = (i: number) => values[i].props.children;
        const { length } = values;

        // I know you can use loops here to create the message
        // but this keeps the logic simple and more maintainable in the long run.
        switch (length) {
          case 1:
            values = `${val(0)} selected`;
            break;
          case 2:
            values = `${val(0)} and ${val(1)} selected`;
            break;
          case 3:
            values = `${val(0)}, ${val(1)} and ${val(2)} selected`;
            break;
          default:
            const plural = values.length === 3 + 1 ? "" : "s";
            const otherCount = length - 3;
            values = `${val(0)}, ${val(1)}, ${val(
              2
            )} and ${otherCount} other${plural} selected`;
            break;
        }
      }

      return (
        <components.ValueContainer {...props}>
          {values}
          {input}
        </components.ValueContainer>
      );
    }
  }}
/>

现场演示

Answer 3

在我看来，我将覆盖 css 以固定大小。 这是css的问题。 我将检查元素并进行更改。

让我们看看上面的例子。 这是你需要调整的css：

.Select-control {
background-color: #fff;
border-color: #d9d9d9 #ccc #b3b3b3;
border-radius: 4px;
border: 1px solid #ccc;
color: #333;
cursor: default;
display: table;
border-spacing: 0;
border-collapse: separate;
height: 36px;
outline: none;
overflow: hidden;
position: relative;
width: 100%;

}

现在移除display: table; 并添加适当的高度。