ReactJS/Semantic-UI DropDown MaxSelection

Question

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

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

这是一个类似的问题，但它根本不起作用，看起来对用户不友好，只是将 selected 放入一个数组中，但我想要的是停止选择用户并至少得到一个小错误。 其实我看起来像这样。

所以让我们看看到目前为止我尝试了什么：

这是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 go ：

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

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                 

/>