antd的Tabs组件通过代码控制换页时为什么不触发onChang回调

Peter
  • 1
新手上路,请多包涵
import { useState } from "react";
import { Button, Tabs } from "antd";

const { TabPane } = Tabs;

const TabsTest = (props) => {
    const [activeKey, setActivekey] = useState('1');

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

    function onChangeTabPanel() {
        setActivekey('2');
    }

    return (
        <div>
            <Tabs activeKey={activeKey} onChange={callback}>
                <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>

            <Button onClick={() => onChangeTabPanel()}>换到第2页</Button>
        </div>
    );
}

export default TabsTest;

上面的例子里,我希望点击 换到第2页 这个按钮时,界面切换到第2个TabPane,同时触发OnChang,但实际是界面切换到了第2个TabPane,没有触发OnChang。
问题是通过代码控制换页时,怎么做才会触发OnChang,或者有类似的其他回调事件可用吗?

回复
阅读 281
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏