Question

我正试图从全局方法劫持所有按钮处理程序，并在满足某个条件时手动触发处理程序。这里有一个简单的例子：http://jsfiddle.net/zvy80mpf/

var clickHandler = function(e) {
    console.log(e.target); // Button
    // I want to hijack the component handler here and trigger it manually
}

var Hello = React.createClass({
    handler: function() {
        console.log('component onclick');
    },
    render: function() {
        return (
            <div onClick={this.props.clickHandler}>
                <button handler={this.handler}>Hello</button>
            </div>
        );
    }
});

React.renderComponent(<Hello clickHandler={clickHandler} />, document.body);

我知道我可以传递handler函数，但我希望从全局上下文中访问处理程序，而无需修改内部组件。

在jQuery中你可以使用$._data(element, 'events')做到这一点，在React中有类似的方法吗？

Answer 1

我不确定完全理解你的要求，但......

React中有一种未记录的方法将数据传递给整个子组件层次结构。

例如，您可以使用以下内容：

React.withContext({handler: handler},function() {
        React.renderComponent(
            self.mountComponent(props),
            self.mountNode
        );
    });

然后您可以使用Mixin访问所有子组件中的处理程序，如：

var WithHandlerMixin = {
    contextTypes: {
        handler: React.PropTypes.func.isRequired
    },
    getHandler(): function() {
        return this.context.handler;
    }
};

这是没有记录的，因为React团队认为它不稳定并且可能有一些错误。但根据我的经验，使用像这样的简单代码工作正常，并已被一些流行的React框架如Fluxxor使用，没有任何麻烦。请注意，签名可能会发生变化，但React团队告诉我，该功能不会被删除。

然而，你必须修改访问该处理程序的所有组件，但我认为mixin不是那么具有侵入性。

Answer 2

如果你将你的gobal处理程序绑定到＆＃34;这个＆＃34;在组件中，您应该能够从全局函数中调用组件单击处理程序，如下所示：

var clickHandler = function(e) {
    console.log(e.target); // Button
    // Hijack the component onClick here
    this.handler();
}

var Hello = React.createClass({
    handler: function() {
        console.log('component onclick');
    },
    render: function() {
        return (
            <div onClick={this.props.clickHandler.bind(this)}> 
                <button handler={this.onClick}>Hello</button>
            </div>
        );
    }
});

React.renderComponent(<Hello clickHandler={clickHandler} />, document.body);

劫持React处理函数

2 个答案: