在antd中单击选项卡窗格时如何调用函数？答案

【问题标题】：how to call a function when tab pane is clicked in antd?在antd中单击选项卡窗格时如何调用函数？
【发布时间】：2021-07-26 09:08:03
【问题描述】：

我的 Antd 有一个 Tab，其中有 3 个 TabPane。如果点击了特定的 TabPane，我需要调用一个函数。

一个名为“OnTabClick”的参数只存在于整个Tab（包含tabpane）而不存在于TabPane

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

我建议使用antd Tabs中提到的函数onTabClick，如果使用正确的密钥，则执行所需的函数。

例如：

const callbackTabClicked = (key, event) => {
  console.log(key);
  console.log(event);
  if (key === '1') {
    console.log('tab 1 clicked...');
  }
};
...

 <Tabs defaultActiveKey="1" onTabClick={callbackTabClicked}>
...

Here 是一个有效的 stackblitz 和完整的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Tabs } from 'antd';
    
const { TabPane } = Tabs;

const callbackTabClicked = (key, event) => {
  console.log(key);
  console.log(event);
  if (key === '1') {
    console.log('tab 1 clicked...');
  }
};
    
   

const Demo = () => (
 <Tabs defaultActiveKey="1" onTabClick={callbackTabClicked}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </TabPane>
    <TabPane tab="Tab 3" key="3">
      Content of Tab Pane 3
    </TabPane>
  </Tabs>
);
    
ReactDOM.render(<Demo />, document.getElementById('container'));

【讨论】：