React-bootstrap how to capture dropdown value

Question

I figured out how to use action-bootstrap to display a drop down list:

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

But how can I write a handler for onSelect to capture the selected option? I tried this but don't know what to write inside:

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

Also, is there a way to set the default option?

Thanks!

Answer 1

The onSelect function onSelect passed by the selected value.

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

In this case, if you select the first option, "abc" will be printed, in the second option you can see that the object can also be transferred.

So in your code

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

I am not sure what you mean by default, since this is not a choice - the button text is what is in the title attribute. If you want to handle the default value, you can simply set the value when null .

Answer 2

you forgot to mention that eventKey is passed as the second parameter, this is the correct form to get the value of what you clicked:

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

Answer 3

You might want to use the FormControl -> select component for your case:

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