反应限制选择数量

Question

我是React的新手，需要帮助才能从下拉菜单中限制所选项目的数量。我的下拉列表有15个选项，但我希望用户能够选择最多5个项目。 我发现使用JQuery的不同方式，但我无法用React实现它们。 感谢您的帮助！

编辑：我使用从下拉语义UI组件：

handleSelectTag = (event, data) => { 
this.setState({ selectedTagsId: data.value }) 
} 

const tagOptions = this.state.existingTags.map(tag => { 
    return {key: tag.id, text: tag.name, value: tag.id} 
}) 

<Dropdown placeholder='Tags' fluid multiple selection options={tagOptions} onChange={this.handleSelectTag} /> 

Answer 1

您应该能够添加一个简单的条件就handleSelectTag()方法来检查你有多少选择的标签的长度。如果用户选择太多，只需拨打一个alert()现在，或闲逛你想要的用户发生后，什么样的行为已经选择5.可能像下面开始..

// assuming this.state.selectedTagsId is an array 
handleSelectTag = (event, data) => { 
    if (this.state.selectedTagsId.length > 5) { 
    alert('You may only select 5'); 
    } 
    else { 
    this.setState({ selectedTagsId: data.value }) 
    } 
}