为什么事件处理程序需要引用而不是调用？ [英] Why do event handlers need to be references and not invocations?

问题描述

在反应教程中，它说

执行 onClick = {alert（'click'）} 会立即发出警报，而不是点击按钮时。

Doing onClick={alert('click')} would alert immediately instead of when the button is clicked.

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

然而，我无法理解为什么会这样......谁能为我澄清一下这个吗？为什么不能将函数调用作为处理程序传递？

However, I cannot understand why that would be... can anyone clarify this for me please? Why can't you pass a function invocation as a handler?

推荐答案

当你执行 onClick = { alert（click）} 这将调用 alert 函数并分配返回值（ undefined ）到 onClick 属性。那么，React看到的是 onClick = {undefined} 并说：嗯，这不是一个函数，我为什么要添加这样的处理程序？

When you do onClick={alert("click")} that's going to call the alert function and assign the returned value (undefined) to the onClick property. So, what React sees is onClick={undefined} and says: well, that's not a function, why would I add such a handler?

你要传递给 onClick 的是一个函数，而不是 undefined 。

What you want to pass to onClick is a function, not undefined.

因此，您必须这样做： onClick = {myFunction} 其中 myFunction 可以是（）=>警告（...）如您所述，或者您可以使用 bind 来创建类似的功能：

Therefore, you have to do: onClick={myFunction} where myFunction can be () => alert("...") as you mentioned, or you can use bind to create a similar function:

onClick={alert.bind(window, "click")}

bind 将返回一个新功能，它将在内部调用 alert 具有click参数的函数。

bind will return a new function which will internally call the alert function with the "click" argument.

类似的情况是当你执行 setTimeout（（）=> alert（1秒后），1000）。 setTimeout 需要一个函数。如果你执行 setTimeout（alert（...），1000），将会调用 alert ，但 setTimeout 将收到第一个参数 undefined （这就是 alert 返回）。

A similar case is when you do setTimeout(() => alert("after 1 second"), 1000). setTimeout expects a function. If you do setTimeout(alert("..."), 1000), the alert will be called, indeed, but the setTimeout will receive as first argument undefined (that's what alert returns).

相反，如果你有一个函数返回一个函数，那就可以了：

Instead, if you have a function which returns a function, that will work:

// This will be called first and will return a function
const sayHelloTo = name => {
   // This will be the function passed to `setTimeout`
   return () => alert(`Hello ${name}`);
};
setTimeout(sayHelloTo("Alice"), 1000);

您可以以相同的方式使用它来获取 onClick thingy：

You can use it in the same way for the onClick thingy:

onClick={sayHelloTo("Alice")}

---

这是关于后台发生的事情的一个非常小的例子（这只是一个概念证明，我我确定实际发生的事情比这更好：

---

This is a very tiny example about what happens in the background (it's just a proof of concept, I'm sure what it actually happens is way better than this):

const elm = {
  onClick: null,
  // The click method can be invoked manually
  // using `elm.click()` or is natively invoked by the browser
  click () {
     if (typeof this.onClick === "function") {
        this.onClick();
     }
  }
};

// If you do:
elm.onClick = alert("click"); // this calls the alert, and returns undefined
elm.onClick === undefined // true

// But when doing:
elm.onClick = () => alert("click");
typeof elm.onClick // "function"

elm.click(); // this will call the alert

这篇关于为什么事件处理程序需要引用而不是调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！