小编典典

为什么事件处理程序需要引用而不是调用?

reactjs

React教程中,它说

这样做onClick={alert('click')}会立即发出警报,而不是在单击按钮时发出警报。

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

但是,我不明白为什么会这样…任何人都可以为我澄清一下吗?为什么不能将函数调用作为处理程序传递?


阅读 279

收藏
2020-07-22

共1个答案

小编典典

当您执行onClick={alert("click")}此操作时,将调用该alert函数并将返回的值(undefined)分配给该onClick属性。所以,React看到的是这样onClick={undefined}说的:
嗯,那不是一个函数,为什么我要添加这样的处理程序?

您要传递的onClick是一个函数,而不是undefined

因此,您必须做:可以像您提到的那样onClick={myFunction}在哪里,也可以用来创建类似的函数:myFunction``() => alert("...")``bind

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

bind返回 一个 新函数 ,该alert函数将在内部使用"click"参数调用该函数。


当您这样做时,情况与此类似setTimeout(() => alert("after 1 second"), 1000)setTimeout期望功能。如果这样做setTimeout(alert("..."), 1000)alert确实会调用,但是setTimeout会作为第一个参数接收undefined(即alert返回的内容)。

相反,如果您有一个 返回函数的函数 ,它将起作用:

// 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

onClick={sayHelloTo("Alice")}

这是关于后台发生的事情的一个非常小的例子(这只是概念的证明,我确定实际发生的事情比这要好得多):

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
2020-07-22