react+antd 选项卡切换

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import CardSecond from './CardSecond';
import './index.css';

ReactDOM.render(
<div>
<CardSecond />
</div>,
document.getElementById('root')
);
 
 
CardSecond.js:
 
import React from 'react';
import 'antd/dist/antd.css';
import { Card } from 'antd';

const tabListNoTitle = [{
key: 'ha',
tab: 'haha',
}, {
key: 'hei',
tab: 'heihei',
}, {
key: 'he',
tab: 'hehe',
}, {
key: 'ke',
tab: 'keke',
}, {
key: 'de',
tab: 'dede',
}];

const contentListNoTitle = {
ha: <p>haha</p>,
hei: <p>heihei</p>,
he: <p>hehe</p>,
ke: <p>keke</p>,
de: <p>dede</p>,
};

class TabsCard extends React.Component {
state = {
noTitleKey: 'hei',
}

onTabChange = (key, type) => {
console.log(key, type);
this.setState({ [type]: key });
}

render() {
return (
<div>
<Card
style={{ width: '100%' }}
tabList={tabListNoTitle}
activeTabKey={this.state.noTitleKey}
onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
>
{contentListNoTitle[this.state.noTitleKey]}
</Card>
</div>
);
}
}

export default TabsCard
 
 
 
#result:
 

posted @ 2018-11-19 22:01  begin256  阅读(5094)  评论(0编辑  收藏  举报