react分页和搜索(饿了吗组件使用)

export default class UserComponent extends React.Component {

 constructor(props) {
 super(props);

 this.state = {
 columns: [
 {
 type: 'selection'
 },
 {
 label: "ID",
 prop: "uid",
 width: 150
 },
 {
 label: "姓名",
 prop: "username",
 width: 160
 },
 {
 label: "地址",
 prop: "cellphone"
 }, {
 label: "操作",
 width: 120,
 fixed: 'right',
 render: (row, column, index)=>{
 return type="text" size="small" OnClick={this.deleteRow.bind(this, index)}>移除</Button>
 }
 }


 ],
 data: [],
 list:[],
 lat_page:"",
 username:""


 }
 }
 deleteRow(index) {
 const { data } = this.state;
 data.splice(index, 1);
 this.setState({
 data: [...data]
 })
 }
 selectRow(){
 fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword='+this.state.username+'&page=1&size=10')
 .then(res => res.json())
 .then(json=>{
 this.setState({
 data:json.data
 })

 })
 }
 componentDidMount(){
 fetch('https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page=1&size=10')
 .then(res => res.json())
 .then(json=>{
 this.setState({
 data:json.data,
 lat_page:json.last_page
 })
 console.log(this.state.data)
 })
 }


 render() {
 return (
 <div className="student">
 type={"text"} placeholder={"输入关键字"} OnChange={e=>{this.setState({username:e.target.value})}} />
 className="btn" OnClick={this.selectRow.bind(this)}>搜索</button>
  color: #6a8759">'80%'}}
 columns={this.state.columns}
 data={this.state.data}
 border={true}
 https://a.daxiangclass.com/offer.php/api/v1/user?searchKeyword=&page='+page+'&size=10')
 .then(res=>res.json())
 .then(json=>this.setState({data:json.data},()=>{
 console.log(this.state.data) })) }} layout="prev, pager, next" total={50} small={true}/>