ReactJS/Semantic-UI DropDown MaxSelection

Question

嗯，我搜索了很多，但什么也没有发现，我决定自己解决它，但被困在中间。首先，让我解释一下，在Semantic-Ui中有一个限制选择选项，但在React版本中没有，您可以在Multiple Select Settings部分找到maxSelections，但是对于反应版本没有这样的选项，如果使用这个选项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中使用value而不是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                 

/>