在React教程中,它说
这样做onClick={alert('click')}会立即发出警报,而不是在单击按钮时发出警报。
onClick={alert('click')}
class Square extends React.Component { render() { return ( <button className="square" onClick={() => alert('click')}> {this.props.value} </button> ); } }
但是,我不明白为什么会这样…任何人都可以为我澄清一下吗?为什么不能将函数调用作为处理程序传递?
当您执行onClick={alert("click")}此操作时,将调用该alert函数并将返回的值(undefined)分配给该onClick属性。所以,React看到的是这样onClick={undefined}说的: 嗯,那不是一个函数,为什么我要添加这样的处理程序?
onClick={alert("click")}
alert
undefined
onClick
onClick={undefined}
您要传递的onClick是一个函数,而不是undefined。
因此,您必须做:可以像您提到的那样onClick={myFunction}在哪里,也可以用来创建类似的函数:myFunction``() => alert("...")``bind
onClick={myFunction}
myFunction``() => alert("...")``bind
onClick={alert.bind(window, "click")}
bind将 返回 一个 新函数 ,该alert函数将在内部使用"click"参数调用该函数。
bind
"click"
当您这样做时,情况与此类似setTimeout(() => alert("after 1 second"), 1000)。setTimeout期望功能。如果这样做setTimeout(alert("..."), 1000),alert确实会调用,但是setTimeout会作为第一个参数接收undefined(即alert返回的内容)。
setTimeout(() => alert("after 1 second"), 1000)
setTimeout
setTimeout(alert("..."), 1000)
相反,如果您有一个 返回函数的函数 ,它将起作用:
// 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