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

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

花韻仙語

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

原创

155人浏览过

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

本文旨在讲解如何使用 React 的 useState hook 实现多个按钮的动态 Tooltip 切换功能。通过维护一个状态变量来记录当前选中的按钮，并根据该状态来决定显示哪个按钮对应的 Tooltip，从而实现点击一个按钮显示其 Tooltip，点击另一个按钮则关闭前一个 Tooltip 并显示当前按钮的 Tooltip 的效果。

在 React 中，要实现点击一个按钮显示对应的 Tooltip，并且点击其他按钮时关闭之前的 Tooltip，需要使用 useState hook 来管理当前选中的按钮状态。以下是一个详细的实现步骤和示例代码：

1. 初始化状态

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

import React, { useState } from 'react';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  // ... 后面代码
};

export default App;

登录后复制

2. 创建按钮和 Tooltip

遍历按钮列表 faqTipBtns，为每个按钮创建一个按钮元素。在按钮的 onClick 事件处理函数中，调用 setSelectedBtn 更新 selectedBtn 状态为当前按钮的 ID。同时，根据 selectedBtn 的值来决定是否显示对应的 Tooltip。

import React, { useState } from 'react';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    <div>
      {faqTipBtns.map((button) => (
        <div key={button}>
          <button onClick={() => setSelectedBtn(button)}>{button}</button>
          {selectedBtn === button && (
            <div>
              Tooltip for {button}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default App;

登录后复制

3. Tooltip 组件 (可选)

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

可以将 Tooltip 的显示逻辑封装成一个单独的组件，以便更好地复用和管理。

import React from 'react';

const Tooltip = ({ content }) => {
  return (
    <div style={{ border: '1px solid black', padding: '5px' }}>
      {content}
    </div>
  );
};

export default Tooltip;

登录后复制

然后在 App 组件中使用 Tooltip 组件：

import React, { useState } from 'react';
import Tooltip from './Tooltip';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    <div>
      {faqTipBtns.map((button) => (
        <div key={button}>
          <button onClick={() => setSelectedBtn(button)}>{button}</button>
          {selectedBtn === button && (
            <Tooltip content={`Tooltip for ${button}`} />
          )}
        </div>
      ))}
    </div>
  );
};

export default App;

登录后复制

完整示例代码:

import React, { useState } from 'react';

const Tooltip = ({ content }) => {
  return (
    <div style={{ border: '1px solid black', padding: '5px' }}>
      {content}
    </div>
  );
};

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    <div>
      {faqTipBtns.map((button) => (
        <div key={button}>
          <button onClick={() => setSelectedBtn(button)}>{button}</button>
          {selectedBtn === button && (
            <Tooltip content={`Tooltip for ${button}`} />
          )}
        </div>
      ))}
    </div>
  );
};

export default App;

登录后复制

注意事项: