反应限制选择次数

Question

我是 React 新手，需要帮助来限制下拉菜单中选定项目的数量。我的下拉菜单有超过 15 个选项，但我希望用户最多可以选择 5 个项目。 我发现了使用 JQuery 的不同方法，但我无法使用 React 实现它们。 感谢您的帮助！

编辑：我正在使用 Semantic 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 }) 
  }
}