Question

这是我的代码：

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的名字。但是这段代码的真实结果总是打印出外面的名字。我认为如果由'this'引起的。如何将'this'绑定到Inner？

Answer 1

编辑：请注意，您无法在React中的组件之间绑定它。

您可以使用中间函数发送回属性。这可能是建议，因为您明确可以安全地检查作为prop传递的回调方法（这使您的代码更具可移植性）。

mysql> select * from table1 ;
+--------+--------+-------+------+
| source | target | count | prob |
+--------+--------+-------+------+
| cat    | dog    |     5 |    3 |
| dog    | cat    |     1 |    1 |
| test1  | test2  |     4 |    2 |
+--------+--------+-------+------+
3 rows in set (0.00 sec)

Answer 2

修改

问题中的用例与重用函数不同 - 您可以使用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>
    }
});

Answer 3

您应该从Outer明确传递Inner所需的内容。两者都是因为这基本上是你唯一的选择，因为它使意图更清晰。

类似的东西：

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>
    }
});

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

3 个答案:

修改