具有多个选择限制的下拉菜单 [英] Dropdown with multiple selection limit

问题描述

我对 React 和语义UI 还是比较陌生。
有一个名为 Dropdown 的组件，具有道具 multiple 和 selecting ，允许选择多个项目。不幸的是，有

I relatively new to React and Semantic UI as well. There is a component called Dropdown with a props multiple and selection, which allows to select multiple items. Unfortunately there is s

在输出中，我的状态如下：

On the output my state looks like this:

const selectedItems = [
   {key: 1, value: 1, text: 'Item 1'},
   {key: 2, value: 2, text: 'Item 2'},
   {key: 3, value: 3, text: 'Item 3'},
];

如何设置N个元素数量的限制？

How can I do setup limit of N amount of elements?

非常感谢

推荐答案

根据 https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-selection 需要创建受控组件，这意味着您将绑定 value = {this.state.selectedItems} ，然后将绑定 onChange = {（e，data ）=> {this.handleChange（e，data）} 并在您的代码中

Well according to https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-selection you need to create controlled component, which means you will bind value={this.state.selectedItems} then you will bind onChange={(e,data) => { this.handleChange(e,data )} and in your code

onChange (e, data) {
  const currentItems = this.state.selectedItems

  if (currentItems.length <= MAX_SELECTION ) {
    currentItems.push(data)

    this.setState({
      selectedItems: currentItems
    })
  }
}

这将创建受控制的组件，允许您自己控制状态，并且将限制更改状态，可能还需要处理此onChange事件内的状态项。

this will crate controlled component which will allows you to control state by yourself, and you will limit changing state, probably you will need to also handle removing items from state inside this onChange event.

这篇关于具有多个选择限制的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！