React中点击多个按钮时修改标题文本的实现方案

核心是通过React的useState钩子维护标题的状态，给每个按钮绑定点击事件，触发状态更新后React会自动重新渲染页面，更新标题内容。

方案1：直接给每个按钮绑定点击逻辑 #

import { useState } from 'react';
import "./styles.css";

function App() {
  // 初始化标题状态，初始值为原文本
  const [title, setTitle] = useState('Change me!');

  return (
    <div className="App">
      {/* 用状态变量渲染标题 */}
      <h1>{title}</h1>
      {/* 每个按钮点击时调用setTitle更新标题 */}
      <button onClick={() => setTitle('你点击了按钮1!')}>Button 1</button>
      <button onClick={() => setTitle('你点击了按钮2!')}>Button 2</button>
      <button onClick={() => setTitle('你点击了按钮3!')}>Button 3</button>
    </div>
  );
}

export default App;

方案2：抽离统一处理函数（适合按钮较多的场景） #

如果按钮数量多，重复写点击逻辑会冗余，可以抽离一个通用处理函数：

import { useState } from 'react';
import "./styles.css";

function App() {
  const [title, setTitle] = useState('Change me!');

  // 统一处理按钮点击，接收按钮名称参数
  const handleButtonClick = (buttonName) => {
    setTitle(`你点击了${buttonName}!`);
  };

  return (
    <div className="App">
      <h1>{title}</h1>
      <button onClick={() => handleButtonClick('Button 1')}>Button 1</button>
      <button onClick={() => handleButtonClick('Button 2')}>Button 2</button>
      <button onClick={() => handleButtonClick('Button 3')}>Button 3</button>
    </div>
  );
}

export default App;

关键说明 #

• useState是React的内置钩子，用来在函数组件中管理状态，返回一个状态变量和更新它的函数
• 点击按钮时调用setTitle传入新的文本，React会检测到状态变化，重新渲染组件，<h1>里的内容就会自动更新

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