CODEWITHSUNDEEP
javascriptreactjstypescriptantd
Sai Krishnadas
Sai Krishnadas

Reputation: 3409

how to call a function when tab pane is clicked in antd?

My Antd has a Tab inwhich there are 3 TabPane. I need to call a function if a specific TabPane is clicked.

A Parameter called "OnTabClick" exist only for the whole Tab (that contains tabpane) but not for the TabPane

Upvotes: 2

Views: 1978

Answers (1)

zerocewl
zerocewl

Reputation: 12804

I suggest to use the the mentioned function onTabClick from antd Tabs and execute the desired function if the correct key was used.

E.g.:

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

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

Here is a working stackblitz and the complete example:

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'));

Upvotes: 2

Related Questions