在 onClick 中react状态集函数

IT技术 javascript reactjs
2021-05-01 21:51:34

通过教程学习 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调用。

4个回答

发生这种情况是因为当你把函数放在括号里时你调用了函数,如果你只把函数放在没有括号的地方,你就会传递“指针”。

一个例子:

// log function
function logTheType(param) {
    console.log(typeof param);
}

// sum function
function sum(a, b) {
    return a + b;
}

// sum is a function
logTheType(sum);
// res: function

// you are calling sum and send the return to the logTheType
logTheType(sum(1, 5));
// res: number

// you pass an anonymous function
logTheType(() => sum(1, 5));
// res: function

一旦 React 渲染了HTML部件,那么 fromonClick={setMessage('Boom')}将同时被评估。所以setMessage函数将返回undefined,这将是你的onClick回调。

要使其工作,您需要传递一个匿名函数,就像您提到的那样,如下所示:

onClick={() => setMessage('Boom')}

通过这种方式,您将一个事件附加到onClicksetMessage一旦您单击它就会被调用,button并且不会立即执行。

来自箭头函数表达式的文档:

箭头函数表达式是正则函数表达式的一种语法紧凑的替代方案,尽管它自身没有绑定到 this、arguments、super 或 new.target 关键字。

我希望这有帮助!

对于 onClick,您需要提供回调函数。

onClick={setMessage('Boom')} // here on render setMessage will be executed.

onClick={() => setMessage('Boom')} // here only click event setMessage will be executed

在您立即执行的无效代码中setMessage,您应该将其更改为箭头函数。

如果你写了这个onClick={setMessage('Boom')},那么你就是在渲染时执行那个函数,因为onClick需要一个函数并且你正在传递函数 ( setMessage),但也用().

所以如果你不需要参数,你可以setMessage不用(),因为你只需要传递对函数的引用。

在你的情况下需要一个箭头函数,因为你需要一个参数