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