J'ai compris comment utiliser react-bootstrap pour afficher une liste déroulante:
<DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} >
<MenuItem key="1">Action</MenuItem>
<MenuItem key="2">Another action</MenuItem>
<MenuItem key="3">Something else here</MenuItem>
</DropdownButton>
Mais comment suis-je supposé écrire le gestionnaire pour onSelect pour capturer l'option en cours de sélection? J'ai essayé cela mais je ne sais pas quoi écrire à l'intérieur:
handleSelect: function () {
// what am I suppose to write in there to get the value?
},
De même, existe-t-il un moyen de définir une option à sélectionner par défaut?
Je vous remercie!
La fonction onSelect
reçoit la valeur sélectionnée
<DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}>
<MenuItem eventKey='abc'>Dropdown link</MenuItem>
<MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem>
</DropdownButton>
Dans ce cas, si vous sélectionnez la première option, ' abc ' est imprimé, dans la deuxième option, vous pouvez voir qu'un objet peut également être transmis.
Donc dans votre code
handleSelect: function (evt) {
// what am I suppose to write in there to get the value?
console.log(evt)
},
Je ne suis pas sûr de comprendre ce que vous entendez par une valeur par défaut car il ne s'agit pas d'une sélection - le texte du bouton est identique à l'attribut title. Si vous voulez gérer une valeur par défaut, vous pouvez simplement définir une valeur lorsque la valeur est null
.
vous avez oublié de mentionner que eventKey est passé en tant que deuxième paramètre. Il s'agit du formulaire approprié pour obtenir la valeur de ce sur quoi vous avez cliqué:
handleSelect: function (evt,evtKey) {
// what am I suppose to write in there to get the value?
console.log(evtKey)
},
Vous souhaiterez peut-être utiliser le composant FormControl >> select pour votre cas:
<FormControl componentClass="select" placeholder="select">
<option value="select">select</option>
<option value="other">...</option>
</FormControl>
Vous devez modifier la signature handleSelect comme suit (à l'intérieur de la classe de composants):
handleSelect = (evtKey, evt) => {
// Get the selectedIndex in the evtKey variable
}
Pour définir la valeur par défaut, vous devez utiliser la propriété title
sur la DropdownButton
.
Réf.: https://react-bootstrap.github.io/components/dropdowns/