迹忆客 专注技术分享

要在 React 中单击时更改按钮的文本：

1. 在状态变量中跟踪按钮的文本。
2. 在按钮元素上设置 onClick 属性。
3. 当按钮被点击时，更新状态变量。

import {useState} from 'react';

const App = () => {
  const [buttonText, setButtonText] = useState('Click');

  function handleClick() {
    setButtonText('New text');
  }

  return (
    <div>
      <button onClick={handleClick}>{buttonText}</button>
    </div>
  );
};

export default App;

要在单击时更改按钮的文本并在延迟后将其更改回来：

1. 在状态变量中跟踪按钮的文本。
2. 在按钮元素上设置 onClick 属性。
3. 当按钮被点击时，更新状态变量。
4. 使用 setTimeout() 方法在延迟后将文本改回。

import {useState} from 'react';

const App = () => {
  const initialText = 'Click';
  const [buttonText, setButtonText] = useState(initialText);

  function handleClick() {
    setButtonText('Loading...');

    setTimeout(() => {
      setButtonText(initialText);
    }, 1000); // 👈️ 1秒后改回文本
  }

  return (
    <div>
      <button onClick={handleClick}>{buttonText}</button>
    </div>
  );
};

export default App;

使用 useState 挂钩跟踪按钮的文本。

当我们使用新文本调用 setButtonText 函数时，按钮元素会重新渲染并显示更新后的文本。

我们在按钮元素上设置了 onClick 属性，因此每次单击按钮时，都会调用 handleClick 函数。

在我们的 handleClick 函数中，我们更新按钮的文本并使用 setTimeout 方法设置一个计时器，该计时器在延迟后调用一个函数。

setTimeout 方法采用的第二个参数是我们想要调用函数的延迟时间（以毫秒为单位）。

示例中的函数在 1000 毫秒（一秒）后调用。