antd点击tab pane时如何调用函数？

Question

我的Antd有一个Tab，里面有3个TabPane。如果单击特定的 TabPane，我需要调用一个函数。

名为“OnTabClick”的参数仅适用于整个选项卡（包含选项卡窗格），但不适用于 TabPane

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

antd点击tab pane时如何调用函数？

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

javascript

typescript

reactjs

antd