React中实现点击按钮切换显示文本的方法

要实现点击按钮切换显示文本，核心是用React的useState钩子管理按钮的文本状态——React是状态驱动UI的，状态更新后UI会自动同步变化。

修正后的完整代码 #

import { useState } from 'react';

export default function Change() {
  // 初始化状态：按钮初始文本为'hello'
  const [btnText, setBtnText] = useState('hello');

  // 点击事件处理：切换文本内容
  const toggleText = () => {
    setBtnText(prev => prev === 'hello' ? 'hi' : 'hello');
  };

  return (
    <div>
      {/* 按钮文本绑定状态，点击触发切换逻辑 */}
      <button onClick={toggleText}>{btnText}</button>
    </div>
  );
}

关键逻辑说明 #

• 状态初始化：btnText存储当前按钮的显示文本，setBtnText是专门用来更新这个状态的函数，初始值设为需求里的'hello'。
• 点击事件处理：用函数式更新（prev代表上一次的状态值）来切换文本，确保每次切换都是基于最新的状态，避免异步更新可能带来的问题。
• UI与状态绑定：按钮的文本直接用{btnText}关联状态，状态一变，按钮显示的内容就自动跟着变。

原代码的问题 #

你原来的代码渲染了两个独立的按钮，没有通过状态关联它们的显示逻辑，点击其中一个不会影响另一个。而需求是同一个按钮根据点击动作切换文本，所以用状态管理才是正确的实现方式。

内容的提问来源于stack exchange，提问作者Zubi