ant-design tabs无默认选择选择卡

最新推荐文章于 2024-08-22 07:35:03 发布

StupigYy

最新推荐文章于 2024-08-22 07:35:03 发布

阅读量1.5k

点赞数 2

文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_36384745/article/details/123879076

版权

本文介绍了如何在AntDesign的Tabs组件中避免页面加载时默认选中第一个选项卡。通过设置activeKey为空字符串，并结合onchange回调函数，可以在页面加载时不预选中任何选项卡，而是让用户自行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design tabs默认第一个选项卡被选定，如果想进入页面时候tabs所有选项卡均为未选择状态，但没有直接对应的API可调用，可以通过Tabs下的activeKey(当前激活 tab 面板的 key),和onchange组合实现

//先将activeKey置空，此时就不存在默认选项卡
this.state.activeKey=''
//点击切换面板时将对应的key值赋给activeKey，即可打开对应的标签页
checkTabs = (key) => {
        this.setState({
            activeKey:key
        })
}
<Tabs
    activeKey={this.activeKey}
    onChange={this.checkTabs}
>
     <TabPane                                                                               
         tab="1"
         key="1"
     >....
     <TabPane                                                                               
         tab="2"
         key="2"
     >....