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

前端之家收集整理的这篇文章主要介绍了reactjs – 在事件处理程序中获取对React组件的引用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我可以将我的事件处理程序附加到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()
}

诀窍是当绑定时,参数顺序被更改,第一个参数现在是传入的绑定值,而事件现在是第二个参数。希望有帮助!

原文链接:https://www.f2er.com/react/301448.html

猜你在找的React相关文章