通过教程学习 React,但我不明白为什么我必须创建一个新函数来传递给 JSX,onClick
而不能只使用从 ReactuseState
调用返回的函数。
下面在调用handleButtonClick
按钮单击时起作用,但如果我只是setMessage
用字符串传递函数调用,则它不起作用。
作品:
function App() {
const [message, setMessage] = React.useState('Javascript is so cool');
function handleButtonClick() {
setMessage('This is a new message');
}
return (
<div>
<h1>{message}</h1>
<button onClick={handleButtonClick}>Update The Message!</button>
</div>
);
}
不起作用:
function App() {
//Javascript goes here
const [message, setMessage] = React.useState('Javascript is so cool');
function handleButtonClick() {
setMessage('This is a new message');
}
return (
<div>
<h1>{message}</h1>
<button onClick={setMessage('Boom')}>Update The Message!</button>
</div>
);
我看到:
<button onClick={() => setMessage('Boom')}>Update The Message!</button>
有效,但我不明白为什么必须像这样设置它,而且我不能像使用setMessage
调用一样使用handleButtonClick
调用。