[英]ReactJS: access components inside component “parent”
如何访问在父组件中创建的React组件?
带有以下代码的示例:
var Widget = React.createClass({
render: function() {
return <div>{ this.props.widget_id }</div>
}
});
var Column = React.createClass({
onBtnClick: function() {
console.log(this);
//
},
render: function() {
var widgets = [];
for(var i=0; i<3; i++) {
widgets.push(<Widget key={i} widget_id={i} />);
}
console.log(widgets);
return <div>
<button onClick={this.onBtnClick}>click me</button>
{widgets}</div>;
}
});
React.render(<Column />, document.getElementById('container'));
的console.log(小部件); 给我这个,创建了3个小部件:
[ReactElement, ReactElement, ReactElement]
在onBtnClick函数中,如何访问它们? 如果我在函数内部检查“ this”,则props和refs数组均为null([]);
这是一个小提琴: https : //jsfiddle.net/chrisbenseler/m8x9f65o/1/
像这样向孩子添加ref
标签(我刚刚添加了“ widget”以使示例更深入,但是它必须是唯一的)
widgets.push(<Widget key={i} ref={"widget"+i} widget_id={i} />);
然后,您的父this.refs
像这样使用this.refs
访问组件。
var secondWidget = this.refs.widget1;
您可以在这里阅读有关裁判的更多信息https://facebook.github.io/react/docs/more-about-refs.html
使用作为道具传递的父处理程序处理子组件中的单击。 我将widget_id更改为ID,因为我知道event.target引用了ID。 没有尝试使用其他属性。
var Widget = React.createClass({
render: function() {
return <div onClick={this.props.onBtnClick}>{ this.props.id }</div>
}
});
var Column = React.createClass({
onBtnClick: function(ev) {
console.log(ev.target.id);
//
},
render: function() {
var widgets = [];
for(var i=0; i<3; i++) {
widgets.push(<Widget key={i} id={i} onBtnClick={this.onBtnClick} />);
}
console.log(widgets);
return <div>
<button>click me</button>
{widgets}</div>;
}
});
React.render(<Column />, document.getElementById('container'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.