react antd Tabs元件屬性activeKey使用方法
阿新 • • 發佈:2018-12-25
專案使用過程中發現的,網上沒有找到相關文章,可能就我(菜鳥)遇到了吧,哈哈~
提供了這個屬性,但是官網沒有給出相關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並存!)