Javascript ReactJS/语义UI下拉菜单MaxSelection

好吧，我找了很多，但什么也没找到，我决定自己解决它，但卡在中间。首先让我解释一下，在

Semantic Ui

中有一个限制选择选项，但在

React

版本中没有，您可以在

Multiple-Select-Settings

部分中找到

maxSelections

，但在版本中没有这样的选项，如果您使用此选项

maxSelections

则不会发生任何情况：

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

以下是

状态

：

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

这是handler：

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}只使用一个选定的值进行更新。

我自己解决了这个问题，并决定将来将其作为其他人的答案发布。我删除了

for

循环和

映射

，并使用了

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});
});

---

这是一个很老的问题。但我把我的解决办法贴在这里。它又短又简单

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

const districtData=['Dhaka'、'Bagerhat'、'Bandarban'，
“Barguna”、“Barishal”、“Bhola”]
const[districtValue，setDistrictValue]=useState（）；
{setDistrictValue（value）}}
选项={districtData.map（（当前值，索引）=>{
返回{
键：`${currentValue}`，
值：`${currentValue}`，
文本：`${currentValue}`，
禁用：districtValue.length>2？真：假
}
//在这里做其他事情
//此处最多3个值，然后将禁用选项。
//如果选择的任何选项小于3，则将再次激活
/>

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});
});