Question

我对React.js相对较新，也是Semantic UI react的新手。有一个名为Dropdown的组件带有道具multiple＆amp; selection，允许选择多个项目。

输出

我的州看起来有点像这样：

selectedItems：[ {key：1，value：1，text：'Item 1'}， {key：2，value：2，text：'Item 2'}， {key：3，value：3，text：'Item 3'} ]

等等

问题：如何设置选择2的限制？

非常感谢

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之后保存状态（最好是redux状态）中的值。 React 状态也可以。然后，当达到某个值的数组长度时禁用它。

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                

/>

下拉多项选择有限制

4 个答案: