1. 程式人生 > >react antd Tabs元件屬性activeKey使用方法

react antd Tabs元件屬性activeKey使用方法

專案使用過程中發現的,網上沒有找到相關文章,可能就我(菜鳥)遇到了吧,哈哈~

提供了這個屬性,但是官網沒有給出相關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並存!)