reactjs - 在事件处理程序中获取对 React 组件的引用

Question

我可以将我的事件处理程序附加到 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>
        );
    }
});

Answer 1

我想我理解 vbarbarosh 提出的问题，或者至少我有一个类似的问题导致我写这篇文章。因此，如果这不能回答最初的问题，希望它可以帮助到达这里的其他人。

就我而言，我有一个带有 n 个子组件的 React 组件，用于定义 UI 操作的配置选项。每个子组件都有一个不同的引用来标识输入代表什么配置选项，我希望能够直接访问该引用，这样我就可以调用子组件上公开的方法。 (我可以公开数据属性并使用 jQuery 来提取，但这似乎有很多额外的麻烦和性能问题)

我的第一次尝试是这样的:

...
<Config ref="showDetails" onChange={this.handleChange} />
<Config ref="showAvatar" onChange={this.handleChange} />
...

理想情况下，我想将所有更改事件绑定(bind)到单个处理程序，然后从调度该事件的目标中提取引用。不幸的是，分派(dispatch)的 SyntheticEvent 确实没有提供了获取目标引用的方法，因此我无法直接调用 this.ref[name]。 methodIWantToCall().

我确实找到了 React 文档中的一篇文章，它引导我找到了解决方案:

https://facebook.github.io/react/tips/communicate-between-components.html

我们可以做的是利用 JavaScript 绑定(bind)并传递额外的参数。

...
<Config ref="showDetails" onChange={this.handleChange.bind(this, 'showDetails')} />
...

现在在我的处理程序中，我获得了附加数据并可以访问我的引用:

handleChange: function(refName, event) {
  this.refs[refName].myMethodIWantToCall()
}

诀窍在于，绑定(bind)时，参数顺序会更改，第一个参数现在是传入的绑定(bind)值，事件现在是第二个参数。希望有帮助!