如何设置在Reaction-Select中可以选择的最大项目数？

编程基础网前端问题

2022-01-01

How to set max number of items that can be selected in react-select?(如何设置在Reaction-Select中可以选择的最大项目数？)

本文介绍了如何设置在Reaction-Select中可以选择的最大项目数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Reaction-Select中的CreatableSelect组件。现在用户可以选择任意数量的项目，但我希望用户选择的项目不超过5个。如何限制可以选择的最大选项数？

<CreatableSelect
  classes={classes}
  styles={selectStyles}
  textFieldProps={{
    label: "Tags"
  }}
  options={suggestions}
  components={components}
  value={this.state.multi}
  onChange={this.handleChange("multi")}
  placeholder=""
  isMulti
/>

推荐答案

我建议您结合使用自定义组件Menu和isValidNewOption，如以下代码所示：

// For this example the limite will be 5
    const Menu = props => {
      const optionSelectedLength = props.getValue().length || 0;
      return (
        <components.Menu {...props}>
          {optionSelectedLength < 5 ? (
            props.children
          ) : (
            <div>Max limit achieved</div>
          )}
        </components.Menu>
      );
    };

    function App() {
      const isValidNewOption = (inputValue, selectValue) =>
        inputValue.length > 0 && selectValue.length < 5;
      return (
        <div className="App">
          <Creatable
            components={{ Menu }}
            isMulti
            isValidNewOption={isValidNewOption}
            options={options}
          />
        </div>
      );
    }

这里alive example。

这样做是为了防止用户访问限制X(在本例中为5)之后的选项，并防止通过isValidNewOption属性创建时的enter键盘事件。

这篇关于如何设置在Reaction-Select中可以选择的最大项目数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react