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