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

发布时间：2020-12-15 06:25:42 所属栏目：百科来源：网络整理

导读：我可以将我的事件处理程序附加到React组件。有没有办法在事件处理程序中引用此组件？ var Foobar = React.createClass({ action: function () { // ... },render: function () { var child = React.Children.only(this.props.children),props = _.omit(this.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!