React+antd获取表格数据并展示

import React, { Component, PropTypes } from ‘react’;
import { Input, Col, Row, Button, Table, message, Pagination} from ‘antd’;
import ‘./style.scss’;
import api from ‘…/…/…/…/common/urlconfig’;
import fetch from ‘…/…/…/…/util/fetch’

const InputGroup = Input.Group;

const columns = [
{
title: ‘序号’,
dataIndex: ‘index’,
},
{
title: ‘用户名’,
dataIndex: ‘userName’,
},
{
title: ‘姓名’,
dataIndex: ‘fullName’,
},
{
title: ‘部门’,
dataIndex: ‘orgName’,
},
{
title: ‘用户当前状态’,
dataIndex: ‘accountState’,
},
{
title: ‘学时数’,
dataIndex: ‘studyHour’,
},
];

class Learns extends Component{
static propTypes = {

};

static defaultProps = {

};

constructor(props){
    super(props);

    this.state = {
        pageNo    : 1,
        pageSize  : 10,
        isLoaded  : false,
        nameValue : "",
        codeValue : "",
        total     : 0,
        current   : 1,
        pageObj   : {},
        data      : [],
    };
}

componentWillMount() {

}

componentDidMount() {
    const { nameValue = undefined, codeValue = undefined,pageNo,pageSize} = this.state;
    console.log(codeValue);

    this.InputGroup({pageNo,pageSize,nameValue,codeValue});
}

InputGroup = (parm) => {
    const detail={
        pageNo      : parm.pageNo,
        pageSize    : parm.pageSize,
        userName    : parm.nameValue,
        orgNameLike : parm.codeValue,

    };
    fetch(api.echartUrl+'后台接口',{type:'GET',data:detail})
        .then((res) => {
            this.setState({
                data    :res.data.records,
                pageObj :res.page,
                current :res.page.pageNo,
            })

        })
};

//用户名点击回调
nameChange = (value) => {
    this.setState({
        nameValue:value
    });
};


codeChange = (value) => {
    this.setState({
        codeValue:value
    });
};

//搜索组件
timeSearch = () => {
    const { nameValue = undefined, codeValue = undefined,pageNo,pageSize} = this.state;
    console.log(codeValue);

    this.InputGroup({pageNo,pageSize,nameValue,codeValue});
};

//下载组件
downTxt = () => {
    const {nameValue,codeValue}=this.state;
    const data = {
        orgNameLike : codeValue,
        userName    : nameValue
    };
fetch(api.echartUrl+'后台下载接口',{type:'GET',data:data})
    .then((res) => {
        console.log(res);
        if (res.code === '1000'){
            message.success(res.data);
        } else {
            message.error(res.subMsg)
        }
    })
};


// 分页子组件
showTotal = (total) =>{
    return `共计 ${total} 条`;
};

// 分页组件
pageChange = (pageNo,pageSize)=>{
    const { nameValue = undefined, codeValue = undefined} = this.state;
    console.log(codeValue);
    this.InputGroup({pageNo,pageSize,nameValue,codeValue});
};


render() {
    const { data,pageObj } = this.state;

    return(
    <div>
        <h1>学时统计</h1>

        <InputGroup size="middle">
            <Row gutter={8}>
                <Col span={5}>
                    <Input className="nameValue" placeholder="请输入部门关键词" onChange={(e) => {this.nameChange(e.target.value)}}/>
                </Col>
                <Col span={5}>
                    <Input className="codeValue" placeholder="请输入用户关键词" onChange={(e) => {this.codeChange(e.target.value)}}/>
                </Col>
                <Button type="primary" icon="search" onClick={this.timeSearch}>查询</Button>
                <Button type="primary" icon="download" onClick={this.downTxt}>下载数据统计</Button>
            </Row>
        </InputGroup>

        <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            rowKey="index"
        />
        <Pagination
            style={{textAlign:"right", marginTop:"10px", marginRight:"40px"}}
            showQuickJumper
            defaultCurrent={1}
            current={this.state.current}
            total={pageObj.pageTotal}
            showTotal={this.showTotal}
            onChange={this.pageChange}
        />
    </div>)
}

}

export default Learns