Question

增刊

关于渲染的以下警告，但不是onClick：

render: function(){
    return (
    <div onClick={alert('I alert on render, but not onClick.')} />
    );
}

以下内容相同：

foo : function(text) {
    alert(text)
},
render: function(){
    return (
    <div onClick={this.foo('I also alert on render, but not onClick.')} />
    );
}

这没有任何作用：

foo : function(text) {
    alert(text)
},
render: function(){
    return (
    <div onClick={function(){this.foo('What is a click and what must I do with it, huh?')}} />
    );
}

虽然这可以按预期工作：

render: function(){
    return (
    <div onClick={function(){alert('I alert onClick only.')}} />
    );
}

请注意，每个代码块都存在于react类中，省略样式会创建一个可单击的区域。另请注意，前两种情况下的警报每次弹出两次，但我相信这是因为网络应用程序使用react-router。

我有两个问题：

对于前两种情况，为什么我需要一个匿名函数来阻止渲染时发出警报？
为什么在第3种情况下foo()没有被调用onClick，但在最后一种情况下会触发警报？

对于Q1，我怀疑我对eventHandlers的理解有点偏差，对于Q2，嗯，我傻眼了。

提前致谢。

Answer 1

在第1和第2种情况下，您只需调用{} brakets中的函数，它们什么都不返回，但onClick字段等待{}内的函数对象。在第3和第4种情况下，您提供匿名函数，在您单击div时调用，但在第3种情况下，您在匿名函数内调用this.foo(...)，this引用全局window对象，没有foo方法。您可以修改foo方法以返回显示给定文本警告的函数：

foo : function(text) {
    return function() {
         alert(text);
    }
},
render: function(){
    return (
        <div onClick={this.foo('I also alert on render, but not onClick.')} />
    );
}

Answer 2

对于前两种情况，为什么我需要一个匿名函数来阻止渲染时发出警报？

评估大括号之间的内容，从而在渲染时显示警告消息。

为什么foo（）在第三种情况下没有被调用onClick，但在最后一种情况下会触发警报？

它实际上被调用，但this不是您期望的上下文，因为您正在创建一个匿名函数。因此，在该函数内部，上下文没有foo方法。您需要一些方法来附加正确的上下文，例如，使用Function.prototype.bind：

foo : function(text) {
    alert(text)
},
render: function(){
    return (
    <div onClick={this.foo.bind(this, 'What is a click and what must I do with it, huh?')}>click</div>
    );
}

请参阅demo。

反应事件处理（onClick）不一致

2 个答案: