我可以将我的事件处理程序附加到React组件。有没有办法在事件处理程序中引用此组件？
var Foobar = React.createClass({
action: function () {
// ...
},render: function () {
var child = React.Children.only(this.props.children),props = _.omit(this.props,'children');
return React.addons.cloneWithProps(child,props);
}
});
var App = React.createClass({
handleMouseEnter: function (event) {
// How to get reference to Foobar without using this.refs['foo']?
// I need to call *action* on it.
},render: function () {
return (
<div>
<Foobar ref="foo" onMouseEnter={this.handleMouseEnter}>
...
</Foobar>
</div>
);
}
});
我想我理解vbarbarosh问的问题，或至少我有一个类似的引导我到这个帖子。所以如果这不能回答原来的问题，希望能帮助那些在这里的人。
在我的情况下，我有一个React组件，n个孩子用于定义UI动作的配置选项。每个孩子都有一个不同的参考，标识输入表示什么配置选项，我想要能够直接访问参考，所以我可以调用暴露在我的子组件上的方法。 (我可以暴露数据，并使用jQuery来提取，但这似乎是很多额外的环和性能问题)
我的第一个尝试是这样的：
...
<Config ref="showDetails" onChange={this.handleChange} />
<Config ref="showAvatar" onChange={this.handleChange} />
...
理想情况下，我想将所有更改事件绑定到单个处理程序，然后从派生事件的目标中提取引用。不幸的是，派生的SyntheticEvent不能提供一种方法来获取目标的引用，所以我无法直接调用this.ref [name] .methodIWantToCall()。
我发现的是React文档中的一篇文章，它引导我解决一个问题：
https://facebook.github.io/react/tips/communicate-between-components.html
我们可以做的是利用JavaScript绑定并传递其他参数。
...
<Config ref="showDetails" onChange={this.handleChange.bind(this,'showDetails')} />
...
现在在我的处理程序中，我得到了附加数据，可以访问我的参考文献：
handleChange: function(refName,event) {
this.refs[refName].myMethodIWantToCall()
}
诀窍是当绑定时，参数顺序被更改，第一个参数现在是传入的绑定值，而事件现在是第二个参数。希望有帮助！
