Button within a tab to switch tabs using Ant Design in React?

user_14039739 0
Viewed 1713

Looking to put a button within the body of a tab that would just switch to the next tab and vice versa. I've been playing around with this for a few hours and can't find a way to do this. Any help is appreciated

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

jsx antd reactjs javascript
1 Answers

You need to use the activeKey property and store the activeKey in the state.

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

I haven't tested myself but it should give you an idea of how to do it.

user_26479020
Related