选择特定选项卡时获取数据- React.js

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];

  const handleTabClick = (index) => {
    setActiveTab(index);
    // 在这里可以根据选项卡的索引发送请求获取对应的数据
    // 使用腾讯云的产品，例如腾讯云函数（SCF）来处理数据获取逻辑
  };

  return (
    <div>
      <div>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => handleTabClick(index)}
            style={{ fontWeight: activeTab === index ? 'bold' : 'normal' }}
          >
            {tab}
          </button>
        ))}
      </div>
      <div>
        {/* 根据 activeTab 的值显示对应的选项卡内容 */}
        {activeTab === 0 && <p>Tab 1 Content</p>}
        {activeTab === 1 && <p>Tab 2 Content</p>}
        {activeTab === 2 && <p>Tab 3 Content</p>}
      </div>
    </div>
  );
};

export default Tabs;