react.js:如何将传入的事件处理程序绑定到子组件

react.js: How to bind passed-in event handler's this to child component?

本文关键字：程序 事件处理 绑定 组件 js react      更新时间：2023-09-26

下面是我的代码:

var Outer = React.createClass({
    clickHandler: function(){
        console.log(this.props.name);
    },
    render: function() {
        return <div><Inner name="inner" clickHandler={this.clickHandler} /></div>;
    }
});
var Inner = React.createClass({
    render: function(){
        return <div onClick={this.props.clickHandler}>This is Inner.</div>
    }
});

我在这里要做的是打印出Inner的名称。但这段代码的实际结果总是打印出Outer的名称。我认为这是由"这个"引起的。我如何将"这个"与"内在"联系起来?

编辑:注意，你不能在React的组件之间绑定它。

你可以有一个中间函数返回属性。这可能是推荐的，因为您可以显式地安全地检查作为prop传递的回调方法(这使您的代码更具可移植性)。

var Outter = React.createClass({
    clickHandler: function(innerName){
        console.log(innerName);
    },
    render: function() {
        return <div><Inner name="inner" clickHandler={this.clickHandler} /></div>;
    }
});
var Inner = React.createClass({
    _clickHandler : function() { 
        /*
        Here you could add some validation that you truly have a callback in your props.
        if(_(this.props.clickHandler).isFunction() ) {
        }
        */
        this.props.clickHandler('innerName');
    },
    render: function(){
        return <div onClick={this._clickHandler}>This is Inner.</div>
    }
});

编辑

问题中的用例与重用函数不同——在重用函数时使用mixins。而是为子节点提供回调。

这听起来像是mixins的完美用例。为你的功能创建一个mixin:

var myClickHandlerMixin = {
    clickHandler: function () { /* ... */ }
};
var Outer = React.createClass({
    mixins: [myClickHandlerMixin],
    render: function() {
        return <div><Inner name="inner" onClick={this.clickHandler} /></div>;
    }
});
var Inner = React.createClass({
    mixins: [myClickHandlerMixin],
    render: function(){
        return <div onClick={this.clickHandler}>This is Inner.</div>
    }
});

您应该从Inner显式传递Outer所需的内容。因为这基本上是你唯一的选择，而且因为它使意图更明确。

类似:

var Outter = React.createClass({
    clickHandler: function(name){
        console.log(name);
    },
    render: function() {
        return <div><Inner name="inner" clickHandler={this.clickHandler} /></div>;
    }
});
var Inner = React.createClass({
    render: function(){
        return <div onClick={this.props.clickHandler.bind(this, 'Inner')}>This is Inner.</div>
    }
});

相关文章：