react antd Tabs组件属性activeKey使用方法

7 篇文章 0 订阅
2 篇文章 0 订阅

项目使用过程中发现的,网上没有找到相关文章,可能就我(菜鸟)遇到了吧,哈哈~

提供了这个属性,但是官网没有给出相关demo,开始是通过ref设置activeKey发现无效,最后找到解决办法,代码如下:

<Tabs ref={(e) => { this._Tabs = e }} activeKey={this.state.index} onChange{(key)=>{
	console.log(key);
	this.setState({ index: key });
}}
>
    <Tabs.TabPane key="1" tab="Tab 1">Content of Tab Pane 1</Tabs.TabPane>
    <Tabs.TabPane key="2" tab="Tab 2">Content of Tab Pane 2</Tabs.TabPane>
	<Tabs.TabPane key="3" tab="Tab 3">Content of Tab Pane 3</Tabs.TabPane>
</Tabs>
<Button className="btn" onClick={()=>{
	console.log(this._Tabs)
	this.setState({ index: "2" });
}} type="primary"
>选中第二个</Button>

其实就是activeKey用state定义,自己然后在onchange里重写下切换,外部改变的时候直接setState就行。(defaultActiveKey不要和activeKey并存!)

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值