如何获取Tabs组件中当前选中的tab并基于选中项调用对应API

你当前使用的是defaultActiveKey配置的非受控Tabs，要拿到选中值只需改为受控模式，配合切换事件处理即可，完整代码示例如下：

import { useState, useEffect } from 'react';
// 以下为antd组件引入示例，若使用其他UI库替换为对应引入路径即可
import { Tabs } from 'antd';

const DemoComponent = () => {
  // 存储当前选中tab的key，默认值和原defaultActiveKey保持一致
  const [activeTabKey, setActiveTabKey] = useState('1');

  // tab切换回调方法
  const handleTabChange = (currentKey) => {
    // 更新选中状态
    setActiveTabKey(currentKey);
    // 根据当前选中的key调用对应API
    switch(currentKey) {
      case '1':
        // 替换为SITES1对应的API调用逻辑
        console.log('调用SITES1接口');
        break;
      case '2':
        // 替换为SITES2对应的API调用逻辑
        console.log('调用SITES2接口');
        break;
      case '3':
        // 替换为SITES3对应的API调用逻辑
        console.log('调用SITES3接口');
        break;
      default:
        break;
    }
  };

  // 若需要页面初始化时就调用默认选中tab的API，加这段逻辑即可
  useEffect(() => {
    console.log('初始化调用SITES1接口');
  }, []);

  return (
    <Tabs 
      activeKey={activeTabKey} 
      onChange={handleTabChange}
    >
      <Tabs.TabPane tab="SITES1" key="1">
      </Tabs.TabPane>
      <Tabs.TabPane tab="SITES2" key="2">
        Content of Tab Pane 2
      </Tabs.TabPane>
      <Tabs.TabPane tab="SITES3" key="3">
        Content of Tab Pane 3
      </Tabs.TabPane>
    </Tabs>
  );
};

export default DemoComponent;

补充说明 #

• 变量activeTabKey就是当前处于选中状态的tab的标识，你可以在组件任意逻辑中直接读取使用
• 如果你使用类组件开发，将状态写入constructor、将handleTabChange改为类方法即可，核心逻辑完全一致
• 若API调用需要自定义参数或者其他处理逻辑，直接修改handleTabChange内的对应分支代码即可

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