React 中使用 useState 实现多个按钮的动态切换-js教程-PHP中文网

React 中使用 useState 实现多个按钮的动态切换

霞舞

发布： 2025-09-04 20:52:01

原创

352人浏览过

react 中使用 usestate 实现多个按钮的动态切换

本文旨在讲解如何使用 React 的 useState hook 实现多个按钮的动态切换，即点击一个按钮时显示其对应的提示信息，同时关闭其他按钮的提示信息。通过示例代码，我们将展示如何维护一个状态来跟踪当前选中的按钮，并根据该状态动态渲染提示信息。

在 React 中，动态切换多个按钮的状态并显示对应的提示信息，可以使用 useState hook 来管理当前选中的按钮。以下是一个详细的步骤和示例代码：

1. 初始化状态：

首先，使用 useState hook 创建一个状态变量 selectedBtn，用于存储当前选中的按钮的标识符。初始值可以设置为空字符串 ""，表示默认没有按钮被选中。

import { useState } from "react";

function App() {
  const [selectedBtn, setSelectedBtn] = useState("");
  // ...
}

登录后复制

2. 定义按钮列表：

创建一个按钮标识符的数组，例如：

const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];

登录后复制

3. 渲染按钮：

使用 map 方法遍历按钮数组，为每个按钮创建一个 JSX 元素。在每个按钮的 onClick 事件处理函数中，调用 setSelectedBtn 函数，将当前按钮的标识符设置为 selectedBtn 的值。

GPTKit

一个AI文本生成检测工具

108

查看详情

{faqTipBtns.map((button) => (
  <div key={button}>
    <button onClick={() => setSelectedBtn(button)}>{button}</button>
  </div>
))}

登录后复制

注意：添加 key 属性，这是 React 渲染列表的推荐做法，提高渲染效率。

4. 渲染提示信息：

在每个按钮下方，根据 selectedBtn 的值，有条件地渲染提示信息。如果 selectedBtn 的值与当前按钮的标识符相同，则显示提示信息；否则，不显示。

{faqTipBtns.map((button) => (
  <div key={button}>
    {selectedBtn === button ? <div> Tooltip {button}</div> : <div />}
    <button onClick={() => setSelectedBtn(button)}>{button}</button>
  </div>
))}

登录后复制

完整示例代码：

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

export default function App() {
  const [selectedBtn, setSelectedBtn] = useState("");
  const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];

  return (
    <div className="App">
      <h1>show Tooltip that related with his button</h1>
      {faqTipBtns.map((button) => (
        <div key={button}>
          {selectedBtn === button ? <div> Tooltip {button}</div> : <div />}
          <button onClick={() => setSelectedBtn(button)}>{button}</button>
        </div>
      ))}
    </div>
  );
}

登录后复制

注意事项：