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

我有两个问题:

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

对于第一季度，我怀疑我对 eventHandlers 的理解有点偏差，而对于第二季度，我很惊讶。

提前致谢。

Answer 1

在第一种和第二种情况下，您只需调用 {} 括号内的函数，它们不会返回任何内容，但 onClick 字段会等待 {} 内的函数对象。在第三种和第四种情况下，您提供匿名函数，当您单击 div 时调用该函数，但在第三种情况下，您在匿名函数中调用 this.foo(...) ，并且 this code> 引用全局 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.')} />
    );
}