[英]`ref` issue with react-bootstrap elements
I am trying to get the get value selected by a DropdownButton with ref='roleType', but whatever I tried fails. 我正在尝试通过ref ='roleType'的DropdownButton选择获取的get值,但是我尝试的任何操作均失败。
<DropdownButton ref='roleType' bsStyle='link' title='Role' key='1' bsSize='xsmall'>
{_items}
</DropdownButton>
I have tried the followings: 我尝试了以下方法:
React.findDOMNode(this.refs.roleType)
this.refs.roleType.getDOMNode()
Note: I am not sure if it is important or not. 注意:我不确定这是否重要。 The DropdownButton
is inside a Panel
, which is inside a section
of a div
. DropdownButton
在Panel
内部,该Panel
在div
的section
内部。
You should use the onSelect
prop of DropdownButton
, as noted on the docs . 如文档所述,您应该使用DropdownButton
的onSelect
道具。
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 a working fiddle: 这是一个工作的小提琴:
https://jsfiddle.net/gadr/azm159g4/2/ https://jsfiddle.net/gadr/azm159g4/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.