CODEWITHSUNDEEP
reactjsreact-bootstrap
Cheng
Cheng

Reputation: 17904

How can I capture the value of a React-Bootstrap dropdown list?

I figured out how to use react-bootstrap to display a dropdown 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 am I suppose to write the handler for onSelect to capture the option being selected? 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 an option to be selected by default?

Upvotes: 24

Views: 47307

Answers (4)

Ehmad Zubair
Ehmad Zubair

Reputation: 213

You should change the handleSelect signature as follows (inside the Component Class):

handleSelect = (evtKey, evt) => {
    // Get the selectedIndex in the evtKey variable
}

To set the default value, you'll need to use the title prop on the DropdownButton

Ref: https://react-bootstrap.github.io/components/dropdowns/

Upvotes: 1

Farax
Farax

Reputation: 1477

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

Upvotes: 1

noveyak
noveyak

Reputation: 3300

The onSelect function is passed 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' is printed, in the second option you can see an object can be passed in as well.

So in your code

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

I'm not sure what you mean by a default value since this isn't a select - the button text is whatever is in the title attribute. If you want to handle a default value you could just set a value when value is null.

Upvotes: 38

dizquierdo
dizquierdo

Reputation: 65

you forgot to mention that eventKey is passed as a second parameter, this is the correct form to obtain 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)
},

Upvotes: 4

Related Questions