Question

通过教程学习React，我不明白为什么我必须创建一个新函数才能传递给JSX onClick，而不能仅仅使用React useState调用返回的函数

下面的操作在单击按钮时调用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调用。

Answer 1

之所以发生这种情况，是因为当您将函数放在括号中时会调用该函数，并且如果仅在函数中没有括号时就会传递“指针”。

一个例子：

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

Answer 2

一旦React渲染了HTML部分，那么来自onClick={setMessage('Boom')}的部分将被同时评估。因此，setMessage函数将返回undefined，这将是您的onClick回调。

要使其正常工作，您需要像上面提到的那样传递匿名函数，如下所示：

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

通过这种方式，您将事件附加到onClick，并且一旦单击setMessage就会调用button，并且不会立即执行。

摘自Arrow function expressions'文档：

箭头函数表达式在语法上是常规函数表达式的紧凑替代形式，尽管没有与this，arguments，super或new.target关键字的绑定。

我希望这会有所帮助！

Answer 3

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

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

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

Answer 4

在不起作用的代码中，您立即执行setMessage，应将其更改为箭头函数。

如果您编写此onClick={setMessage('Boom')}，那么您将在渲染时立即执行该函数，因为onClick需要一个函数，并且您正在传递函数（setMessage），并且还可以使用()。

因此，如果不需要参数，则可以不使用setMessage来传递()，因为只需要传递对函数的引用即可。

在您的情况下，需要一个箭头功能，因为您需要一个参数

在onClick中反应状态集功能

4 个答案: