React-Bootstrap, wie der Wert der Dropdown-Liste zu erfassen

Question

ich herausgefunden, wie zu verwenden, reagieren-Bootstrap eine Dropdown-Liste angezeigt werden:

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

Aber wie bin ich nehme an den Handler schreiben für onSelect die erfassen Option ausgewählt? Ich habe versucht, dies aber nicht wissen, was im Innern schreiben:

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

Auch ist es eine Möglichkeit, eine Option zu setzen standardmäßig ausgewählt werden?

Vielen Dank!

Answer 1

Die onSelect Funktion wird der ausgewählte Wert übergeben

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

In diesem Fall, wenn Sie die erste Option wählen, ‚abc‘ gedruckt wird, in der zweiten Option, die Sie ein Objekt sehen kann übergeben werden auch.

Also in Ihrem Code

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

Ich bin mir nicht sicher, was Sie von einem Standardwert bedeuten, da dies kein select - der Button-Text ist, was im Titel-Attribut ist. Wenn Sie mit einem Standardwert arbeiten möchten, können Sie einfach einen Wert eingeben, wenn der Wert null ist.

Answer 2

Sie, dass eventKey als zweiter Parameter übergeben vergessen zu erwähnen, ist dies die richtige Form, den Wert zu erhalten, was Sie angeklickt:

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

Answer 3

Möglicherweise möchten Sie für die Formcontrol >> wählen Sie Komponente verwenden Ihr Fall:

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