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

反应限制选择数量

1 个答案: