React 事件处理 (onClick) 不一致

Question

补充

渲染时出现以下警报，但单击时不会：

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 class 中，并且省略样式会创建一个可点击的区域。另请注意，前两种情况下的警报各弹出两次，但我相信这是因为网络应用程序使用了 react-router。

我有两个问题：

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

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

提前致谢。

Answer 1

在第一种和第二种情况下，您只需调用 {} 括号内的函数，它们 return 什么都没有，但 onClick 字段等待 {} 内的函数对象。在第 3 种和第 4 种情况下，您提供了匿名函数，当您单击 div 时调用它，但在第 3 种情况下，您在匿名函数中调用 this.foo(...)，而 this 指的是全局 window 对象，它没有 foo 方法。您可以将 foo 方法修改为 return 函数，该函数显示带有给定文本的警报：

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

Answer 2

For the first two cases, why do I need an anonymous function to prevent an alert on render?

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

Why does foo() not get called onClick in the 3rd case, but alert is triggered in the last case?

它实际上被调用了，但是 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。

React 事件处理 (onClick) 不一致

React event-handling (onClick) inconsistency

javascript

onclick

event-handling

reactjs