我比较新 React 和 Semantic UI 有一个组件叫做 Dropdown 有恃无恐 multiple 和 selection它允许选择多个项目。不幸的是，有
我的输出状态是这样的。
const selectedItems = [
{key: 1, value: 1, text: 'Item 1'},
{key: 2, value: 2, text: 'Item 2'},
{key: 3, value: 3, text: 'Item 3'},
];
我怎样才能设置N个元素的数量限制？
非常感谢
那么根据 https:/react.semantic-ui.commodulesdropdown#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事件中处理从状态中删除项目。
在这个onChange事件中，你可能还需要处理从状态中移除物品的问题。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
}
我想建议另一种方法.直接对下拉值设置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>