2015-07-20 12 views
7

ho capito come utilizzare reagire-bootstrap per visualizzare un elenco a discesa:React-bootstrap come catturare il valore di elenco a discesa

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

Ma come sono io suppongo di scrivere il gestore per onSelect per catturare il opzione selezionata? Ho provato questo ma non so cosa scrivere all'interno:

handleSelect: function() { 
    // what am I suppose to write in there to get the value? 
}, 

Inoltre, c'è un modo per impostare un'opzione per essere selezionata per impostazione predefinita?

Grazie!

risposta

10

La funzione onSelect viene passato il valore selezionato

<DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}> 
    <MenuItem eventKey='abc'>Dropdown link</MenuItem> 
    <MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem> 
</DropdownButton> 

In questo caso, se si seleziona la prima opzione, 'abc' viene stampato, nella seconda opzione si può vedere un oggetto può essere passato anche.

Così nel codice

handleSelect: function (evt) { 
    // what am I suppose to write in there to get the value? 
    console.log(evt) 
}, 

Non sono sicuro di cosa si intende per un valore di default dal momento che questa non è una di selezione - il testo del pulsante è tutto ciò che è nella title. Se si desidera gestire un valore predefinito, è sufficiente impostare un valore quando il valore è null.

+0

Impressionante, grazie! Permettetemi di chiarire la mia seconda domanda. Ho tre opzioni nel mio elenco a discesa. Voglio che la prima opzione sia selezionata per impostazione predefinita. Qual è il modo corretto per realizzare questo? Grazie ancora! Oh, anche, dove hai trovato la documentazione su 'eventKey'? Ho guardato attraverso il sito di react-bootstrap e non sono riuscito a trovarlo ... – Cheng

+2

Hmm, penso che il problema siano queste voci di menu. L'aspettativa è che qualcosa dovrebbe accadere quando l'utente seleziona qualcosa dal menu a discesa. Non ha il concetto di un valore corrente. Se stai cercando di avere un elemento simile a una forma in cui l'utente può scegliere un'opzione e poi andare avanti potresti voler dare un'occhiata a noveyak

+0

Ho notato un problema strano. '' Quindi, all'interno di 'handleSelect', ho scritto' this.setState ({value: index}); console. log (this.state.value); 'Quando leggo l'output della console, il valore sembra essere in ritardo. Significato, quando seleziono un oggetto per la prima volta. La console emetterebbe il valore predefinito della variabile di stato. Se seleziono un altro elemento, la console emetterebbe il valore dalla mia selezione precedente. Sai perché succede? – Cheng

4

si dimenticato di dire che eventKey viene passato come secondo parametro, questa è la forma corretta per ottenere il valore di ciò che si è fatto clic:

handleSelect: function (evt,evtKey) { 
    // what am I suppose to write in there to get the value? 
    console.log(evtKey) 
}, 
1

si consiglia di utilizzare la FormControl >> Selezionare il segnale Component il tuo caso:

<FormControl componentClass="select" placeholder="select"> 
     <option value="select">select</option> 
     <option value="other">...</option> 
    </FormControl> 
Problemi correlati