正文
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:
