reagiere limit Anzahl der Auswahl

Question

Ich bin neu in React und würde Hilfe benötigen, um die Anzahl der ausgewählten Elemente aus einem Dropdown-Menü zu begrenzen. Mein Dropdown-Menü enthält mehr als 15 Optionen, aber ich möchte, dass der Benutzer maximal 5 Elemente auswählen kann. Ich habe verschiedene Möglichkeiten gefunden, dies mit JQuery zu tun, aber ich kann sie nicht mit React implementieren. Danke für Ihre Hilfe!

Edit: Ich verwende eine Komponente von Semantic UI für das Drop-Down-:

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

Sie sollten die Länge von einer einfachen Bedingung der handleSelectTag() Methode hinzufügen zu können, um zu überprüfen, wie viele Tags, die Sie ausgewählt haben . Wenn der Benutzer zu viele ausgewählt hat, rufen Sie einfach ein alert() für jetzt, oder schnüffeln, zu welchem ​​Verhalten möchten Sie, nachdem der Benutzer geschehen gewählt 5. Vielleicht unter so etwas wie das starten ..

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