ReactJS/语义UI下拉列表最大选择

Question

好吧，我搜索了很多，但没有找到，我决定自己解决它，但一直处于中间。让我首先解释一下，在Semantic-Ui中有一个极限选择选项，但在React版本中没有，在这里你可以在Multiple Select Settings部分找到maxSelections，但在reactjs版本中没有这样的选项，如果你使用这个选项maxselections，什么都不会发生：

<Dropdown placeholder='Skills' fluid multiple selection options={options} maxselections={2} />

这里有一个类似的问题，但它根本不起作用，看起来对用户不友好，只是在数组中进行选择，但我想要的是停止选择用户，至少会出现一个小错误。事实上，我看起来像这样。

所以让我们看看我迄今为止尝试了什么：

以下是来自json:的默认数据

const data = {
options: [
{id: 1, name: "example1"},
{id: 2, name: "example2"},
{id: 3, name: "example3"},
{id: 4, name: "example4"},
{id: 5, name: "example5"}
]
};
const option = data.options.map((obj) => ({
key: obj.id,
text: obj.name,
value: obj.name
}));

这里是state:

this.state = {
limit: false,
selectOption: option
};

这是处理程序：

getSelected  = (e, {value}) => {
const selectedOption = []
for(let i=1;value.length> i;i++){
selectedOption.push({id: i, name: value[i]});
}
const fake = selectedOption.map((obj) => ({
key: obj.id,
text: obj.name,
value: obj.name
}));
if(value.length === 2) {
this.setState({
limit: true,
selectOption: fake
})
} else {
this.setState({
limit: false,
selectOption: option
}) 
}
}

最后：

<Dropdown placeholder='Skills' fluid multiple selection options={this.state.selectOption} onChange={this.getSelected} closeOnChange={this.state.limit ? true : false}/>

逻辑是，如果用户达到所选的最大值，关闭下拉列表，然后只在下拉列表中显示所选的值，如果小于，则再次显示默认选项。我不抗拒这种逻辑，也许这不是一个很好的做法，如果你有任何想法，请告诉我。但在当前代码中，问题是，options={options}只使用一个选定的值进行更新。

Answer 1

我自己解决了这个问题，并决定将来把它作为其他人的答案发布。我删除了for循环和map，并使用了forEach和这个工作良好的：

getSelected  = (e, {value}) => {
const selectedOption = []
value.forEach(function(v, i) {
selectedOption.push({key: i, text: v, value: v});
});
if(value.length === 2) {
alert('You can only select 2 options') //show error
this.setState({
limit: true,
selectOption: selectedOption
})
} else {
this.setState({
limit: false,
selectOption: option
})
}
}

如果有人在value中使用id而不是text，请使用以下内容：

getSelected  = (e, data) => {
...
data.value.forEach(function(i) {
const opt = data.options.find(o => o.value === i);
selectedOption.push({key: i, text: opt.text, value: i});
});

Answer 2

这是一个很老的问题。但我在这里发布了我的变通方法。它又短又简单。

首先，在每次onChange之后，将值保存在状态(最好是redux状态(中。反应状态也可以。然后，当达到该值的特定数组长度时，将其禁用。

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 option is less than 3                 
/>