具有多项选择限制的下拉列表

Question

我对 React 和 Semantic UI 也比较陌生。有一个名为 Dropdown 的组件，带有道具 multiple 和 selection，它允许 select 多个项目。

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

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

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

非常感谢

Answer 1

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

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

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

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

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

Answer 2

Semantic UI React 下拉选项提供了一个名为 onAddItem 的功能。您将必须使用 value 数据键并执行如下操作：

const onAddItem = (event, data) => {

    1.Fetch the state of the selected values, stored in the value key
    2. Check if the limit is greater than 2
    3. If the condition is met, then add
    4. Else, show an error

}

Documentation Link

Answer 3

我想推荐另一种方法。将 useState 直接设置为下拉值。

import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';

const MAX_FRUITS_SELECTION = 3;

const FruitsSelect = () => {
  const [fruitId, setFruitId] = useState([]);

  const optionsFRUITSFake = [
    { key: 1, value: 1, text: 'Orange' },
    { key: 2, value: 2, text: 'Lemon' },
    { key: 3, value: 3, text: 'Apple' },
    { key: 4, value: 4, text: 'Banana' },
    { key: 5, value: 5, text: 'Melon' },
    { key: 6, value: 6, text: 'Pineapple' }
  ];

  const handleDropFilterFruit = (e: any, data?: any) => {
    if (data.value.length <= MAX_FRUITS_SELECTION) {
      setFruitId(data.value);
    }
  };

  return (
    <Dropdown
      placeholder="Select Fruits"
      onChange={handleDropFilterFruit}
      value={fruitId}
      fluid
      multiple
      selectOnNavigation={false}
      search
      selection
      options={optionsFRUITSFake}
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <FruitsSelect />
  </React.StrictMode>,
  rootElement
);

<!DOCTYPE html>
<html lang="en">
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
 <div id="root"></div>
</body>
</html>

Answer 4

我在这里发布我的解决方法。它可能更简短。

首先，在每次onChange之后将值保存在state（最好是redux state）中。 React state 也可以。然后，当该值的某个数组长度达到时，将其禁用。

const districtData = ['Dhaka', 'Bagerhat', 'Bandarban', 
'Barguna', 'Barishal', 'Bhola']

const [districtValue, setDistrictValue] = useState();

<Dropdown
onChange={async (e, { name, value }) => {setDistrictValue(value)}}
options={districtData.map((currentValue, index) => {
    return {
    key: `${currentValue}`,
    value: `${currentValue}`,
    text: `${currentValue}`,
    disabled: districtValue.length > 2 ? true : false 
}
// Do other things here
// Max 3 values here, then options will be disabled. 
// Will be live again if any selected options are less than 3 here                

/>

具有多项选择限制的下拉列表

Dropdown with multiple selection limit

javascript

arrays

reactjs

semantic-ui-react