[英]ReactJS: access components inside component “parent”
How do I access React components created inside a parent component? 如何访问在父组件中创建的React组件?
Example, with this code: 带有以下代码的示例:
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(widgets); 的console.log(小部件); gives me this, the 3 widgets created:
给我这个,创建了3个小部件:
[ReactElement, ReactElement, ReactElement]
Inside the onBtnClick function, how do I access them? 在onBtnClick函数中,如何访问它们? If I inspect "this" inside the function, either props and refs array are null ([]);
如果我在函数内部检查“ this”,则props和refs数组均为null([]);
Here's a fiddle: https://jsfiddle.net/chrisbenseler/m8x9f65o/1/ 这是一个小提琴: https : //jsfiddle.net/chrisbenseler/m8x9f65o/1/
Add ref
tag to the child, like this (I just added "widget" to give the example more depth, but it just has to be unique) 像这样向孩子添加
ref
标签(我刚刚添加了“ widget”以使示例更深入,但是它必须是唯一的)
widgets.push(<Widget key={i} ref={"widget"+i} widget_id={i} />);
Then your parent accesses the component using this.refs
like so 然后,您的父
this.refs
像这样使用this.refs
访问组件。
var secondWidget = this.refs.widget1;
You can read more about refs here https://facebook.github.io/react/docs/more-about-refs.html 您可以在这里阅读有关裁判的更多信息https://facebook.github.io/react/docs/more-about-refs.html
Handle the click in the child component using the parents handler passed as a prop. 使用作为道具传递的父处理程序处理子组件中的单击。 I changed the widget_id to just id because I know the event.target references the id.
我将widget_id更改为ID,因为我知道event.target引用了ID。 Havn't tried it with other attributes.
没有尝试使用其他属性。
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.