javascript - `ref` issue with react-bootstrap elements -

i trying get value selected dropdownbutton ref='roletype', whatever tried fails.

    <dropdownbutton ref='roletype' bsstyle='link' title='role' key='1'  bssize='xsmall'>       {_items}     </dropdownbutton> 

i have tried followings:

 react.finddomnode(this.refs.roletype)  this.refs.roletype.getdomnode() 

note: not sure if important or not. dropdownbutton inside panel, inside section of div.

you should use onselect prop of dropdownbutton, noted on docs.

var dropdownbutton = reactbootstrap.dropdownbutton; var menuitem = reactbootstrap.menuitem;  var hello = react.createclass ({     getinitialstate() {          return { key: null }     },      onselect(key) {         this.setstate({ key: key });     },      render() {         var selected = this.state.key ? <p>selected: {this.state.key}</p> : '';         return (<div>         <dropdownbutton bsstyle="primary" title="test" onselect={this.onselect}>           <menuitem eventkey='1' active={this.state.key==='1'}>action</menuitem>           <menuitem eventkey='2' active={this.state.key==='2'}>another action</menuitem>           <menuitem eventkey='3' active={this.state.key==='3'}>active item</menuitem>           <menuitem divider />           <menuitem eventkey='4' active={this.state.key==='4'}>separated link</menuitem>         </dropdownbutton>         {selected}         </div>);     } });  react.render(<hello/>, document.getelementbyid('container')); 

here's working fiddle:

https://jsfiddle.net/gadr/azm159g4/2/