具有多项选择限制的下拉菜单
[英]Dropdown with multiple selection limit
问题描述
I relatively new to React and Semantic UI as well.
我对React和Semantic UI也比较React 。 There is a component called Dropdown with a props multiple and selection , which allows to select multiple items.有一个名为Dropdown的组件，带有一个multiple和selection ，它允许选择多个项目。
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'},
];
How can I do setup limit of N amount of elements?如何设置 N 个元素的限制？
Many thanks非常感谢
4 个解决方案
解决方案1
2 2018-04-06 11:07:42
The Semantic UI React Dropdown option provides a function called as onAddItem . Semantic UI React Dropdown 选项提供了一个名为onAddItem的函数。 You will have to use the value data key and do something like this:您将不得不使用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
}
解决方案2
1 已采纳 2018-04-06 11:04:25
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那么根据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
})
}
}
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.这将创建受控组件，它允许您自己控制状态，并且您将限制更改状态，可能您还需要在此 onChange 事件中处理从状态中删除项目。
解决方案3
1 2020-06-08 20:52:38
I would like to suggest another approach.我想建议另一种方法。 set useState directly to the dropdown value.将 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>
解决方案4
0 2021-05-28 14:22:24
I'm posting my workaround here.我在这里发布我的解决方法。 It's probably more short and simple.它可能更短更简单。
At first, save the values in the state (preferably redux state) after every onChange.首先，在每次 onChange 之后保存状态（最好是 redux 状态）中的值。 React state also would do fine. React 状态也可以。 Then, make it disabled when a certain array length of the value is reached.然后，在达到某个值的数组长度时禁用它。
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
/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.