在 React 中使用 Ant Design 切换选项卡中的按钮？

Question

希望在选项卡主体中放置一个按钮，该按钮只会切换到下一个选项卡，反之亦然。我已经玩了几个小时了，但找不到方法来做到这一点。任何帮助表示赞赏

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1 
      <button type="button">
         Go to tab 2
      </button>
    </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 />, mountNode);

Answer 1

您需要使用 activeKey 属性并将 activeKey 存储在状态中。

import React from 'react'
import { Tabs } from 'antd';
const { TabPane } = Tabs;

function Demo () {
  const [activeKey, setActiveKey] = React.useState('1')
  const onKeyChange = (key) => setActiveKey(key)
  
  return (
    <Tabs defaultActiveKey="1" activeKey={activeKey} onChange={onKeyChange}>
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
        <button onClick={() => onKeyChange('2')}>Go to "Tab 2"</button>
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
        <button onClick={() => onKeyChange('1')}>Go to "Tab 1"</button>
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  )
}

ReactDOM.render(<Demo />, document.getElementById('root'));

我还没有测试过自己，但它应该可以让您了解如何做到这一点。