{"size": 1331, "ext": "js", "max_stars_repo_path": "src/page/card.js", "max_stars_repo_name": "JobWebNie/React-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/page/card.js", "max_issues_repo_name": "JobWebNie/React-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/page/card.js", "max_forks_repo_name": "JobWebNie/React-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.1632653061, "max_line_length": 64, "alphanum_fraction": 0.3771600301}
import React,{Component,Fragment} from 'react';
import {Card} from 'antd';

class AntCard extends Component{
    constructor(props){
        super(props);
        this.state = {
            key: 'tab1',
            tabList:[{
                key: 'tab1',
                tab: 'tab1',
              }, {
                key: 'tab2',
                tab: 'tab2',
              }]
        }
        this.handleTabChange = this.handleTabChange.bind(this);
    }

    handleTabChange(key){
        this.setState({
            key
        })
    }

    render(){
        return(
            <Fragment>
                <header className="articleHeader">
                    <h2>Card 卡片</h2>
                </header>
                <div className="article-body">
                    <p>常用于配合栅格系统， 进行后台的布局</p>
                    <Card
                        style={{ width: '100%' }}
                        title="Card title"
                        extra={<a href="">More</a>}
                        tabList={this.state.tabList}
                        activeTabKey={this.state.key}
                        onTabChange={this.handleTabChange}
                        >
                    </Card>
                </div>
            </Fragment>
        )
    }
}

export default AntCard;