React:单击时更改按钮文本

下面的示例向您展示了如何在 React 中单击按钮后更改其文本。我们将使用useState挂钩来完成工作。

应用预览

React:单击时更改按钮文本

编码

// KindaCode.com
// src/App.js
import { useState } from 'react';

function App() {
  // Button Text
  const [buttonText, setButtonText] = useState('Hello World');

  // This function will be called when the button is clicked
  const handleClick = () => {
    setButtonText('Goodbye, World!');
  };

  return (
    <div style={{ padding: 30 }}>
      <button onClick={handleClick} style={{ padding: '10px 30px' }}>
        {/* Button Text */}
        {buttonText}
      </button>
    </div>
  );
}

export default App;

解释

  1. 将按钮文本存储在状态变量中,以便我们可以通过编程方式对其进行更新:
const [buttonText, setButtonText] = useState('Hello World');

2.设置onClick事件的处理函数:

<button onClick={handleClick}>{buttonText}</button>

3.调用状态更新函数设置新的按钮文本:

const handleClick = () => {
    setButtonText('Goodbye, World!');
};
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:单击时更改按钮文本