JIYIK CN >

To change the text of a button when clicked in React:

1. Keep track of the button's text in a state variable.
2. Set the onClick attribute on the button element .
3. When the button is clicked, update the state variable.

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;

To change the text of a button when clicked and change it back after a delay:

1. Keep track of the button's text in a state variable.
2. Set the onClick attribute on the button element .
3. When the button is clicked, update the state variable.
4. Use setTimeout()the method to change the text back after a delay.

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;

Use useStatethe hook to keep track of the button's text.

When we call setButtonTextthe function with the new text, the button element re-renders and displays the updated text.

We have set the onClick attribute on the button element , so every time the button is clicked, the handleClick function will be called.

In our handleClickfunction, we update the button's text and use setTimeoutthe method to set a timer that calls a function after a delay.

setTimeoutThe second parameter the method takes is the delay in milliseconds that we want the function to be called with.

The function in the example is called after 1000 milliseconds (one second).