希望在选项卡的正文中放置一个按钮,该按钮只会切换到下一个选项卡,反之亦然。我已经玩了几个小时了,找不到办法做到这一点。感谢任何帮助
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);
最佳答案
您需要使用 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'));
我自己还没有测试过,但它应该能让您知道如何去做。
关于javascript - 使用 React 中的 Ant Design 在选项卡中切换选项卡的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68749462/