web-dev-qa-db-fra.com

React-bootstrap comment capturer la valeur de la liste déroulante

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!

reactjsreact-bootstrap
11
Cheng

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.

17
noveyak

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)
},
3
dizquierdo

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>
1
Farax

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/

0
Ehmad Zubair