import React, { Component } from ‘react’;
import TableFilter from ‘./TableFilter’;
import CustomTable from ‘./CustomTable’;
export default class AuthorityTable extends Component {
static displayName = ‘AuthorityTable’;
static propTypes = {};
static defaultProps = {};
constructor(props) {
super(props);
this.state = {
current:1,
dataSource:[],
total:100,
limit:10,
};
}
shouldComponentUpdate(){
return true;
}
search=(username,sex,status)=>{
console.log(username+sex+status);
this.setState({
total:200
})
}
render() {
return (
);
}
}
const styles = {};
这是父组件其中包含两个组件,一个是表格,一个是表格筛选条件
表格筛选条件里传入了一个父组件的方法,表格筛选组件选择筛选项后回调,在父组件里修改他的state,为什么他的表格子组件没有被重新渲染
筛选组件
import React, { Component } from ‘react’;
import { Button, Input, Select } from ‘@icedesign/base’;
export default class TableFilter extends Component {
static displayName = ‘TableFilter’;
constructor(props) {
super(props);
this.state = {
username:“xx”,
sex:“all”,
status:“1”,
};
}
handleClickButton =()=>{
var state=this.state;
this.props.search(state.username,state.sex,state.status);
}
handleSelectSex =(value)=>{
this.setState({
sex:value
})
}
handleSelectStatus =(value)=>{
this.setState({
status:value
})
}
handleChangeInput =(value)=>{
this.setState({
username:value
})
}
render() {
return (
真实姓名:
性别:
<Select style={{ width: ‘200px’ }} value={this.state.sex} onChange={this.handleSelectSex.bind(this)}>
<Select.Option value=“all”>全部</Select.Option>
<Select.Option value=“man”>男</Select.Option>
<Select.Option value=“woman”>女</Select.Option>
状态:
<Select style={{ width: ‘200px’ }} value={this.state.status} onChange={this.handleSelectStatus.bind(this)}>
<Select.Option value=“all”>全部</Select.Option>
<Select.Option value=“1”>正在使用</Select.Option>
<Select.Option value=“0”>停用</Select.Option>
查询
);
}
}
const styles = {
tableFilter: {
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘space-between’,
padding: ‘20px’,
marginBottom: ‘20px’,
background: ‘#fff’,
},
title: {
height: ‘20px’,
lineHeight: ‘20px’,
color: ‘#333’,
fontSize: ‘18px’,
fontWeight: ‘bold’,
paddingLeft: ‘12px’,
borderLeft: ‘4px solid #666’,
},
filter: {
display: ‘flex’,
},
filterItem: {
display: ‘flex’,
alignItems: ‘center’,
marginLeft: ‘20px’,
},
filterLabel: {
fontWeight: ‘500’,
color: ‘#999’,
},
submitButton: {
marginLeft: ‘20px’,
},
};
表格组件
import React, { Component } from ‘react’;
import { Table, Pagination, Balloon, Icon } from ‘@icedesign/base’;
import axios from ‘axios’;
export default class Home extends Component {
static displayName = ‘Home’;
constructor(props) {
super(props);
this.state = { //继承父组件的值
current: this.props.current,
dataSource: this.props.dataSource,
total: this.props.total,
limit: this.props.limit,
};
}
getData = (page,limit) => {
const _this=this; //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
axios({
method: 'post',
url: 'http://api.quwancode.com/api.bookdrift.com/web/admin_user/userdata',
data: 'page='+page+'&&limit='+limit,
}).then(function (response) {
//修改状态
var data=response.data.data;
console.log(data);
_this.setState({
dataSource: data.data,
total: data.total,
});
})
.catch(function (error) {
console.log(error);
});
};
componentDidMount(){ //当组件输出到 DOM 后会执行 componentDidMount()
this.getData(this.state.current,this.state.limit);
console.log(this.state.index);
}
handlePagination = (current) => { //翻页操作
this.getData(current,this.state.limit); //读取当页数据
this.setState({
current:current //改变目前页面值
})
};
handleList =(limit)=>{ //每页显示记录选择器改变值 从第一页开始
this.getData(1,limit);
this.setState({
limit:limit, //改变每页记录值
current:1 //从第一页开始
})
}
handleSort = (dataIndex, order) => {
const dataSource = this.state.dataSource.sort((a, b) => {
const result = a[dataIndex] - b[dataIndex];
if (order === 'asc') {
return result > 0 ? 1 : -1;
}
return result > 0 ? -1 : 1;
});
this.setState({
dataSource,
});
};
renderstatus = (value) => {
if(value==1)
value=“正在使用”;
else
value=“停用”;
return (
{value}
);
};
renderOper = () => {
return (
);
};
renderhead = (value) => {
return (
<Balloon
align=“lt”
trigger={}
closable={false}
style={{ lineHeight: ‘24px’ }}
>
{value}
);
};
render() {
return (
<Pagination
pageSize={this.state.limit} //每页记录数
total={this.state.total} //记录总数
current={this.state.current} //目前页面
onChange={this.handlePagination}//改变页面回调函数
onPageSizeChange={this.handleList}//每页记录选择器改变回调函数
style={styles.pagination}
pageSizeSelector=‘dropdown’ //选择器样式
/>
);
}
}
const styles = {
tableContainer: {
background: ‘#fff’,
paddingBottom: ‘10px’,
},
pagination: {
margin: ‘20px 0’,
textAlign: ‘center’,
},
editIcon: {
color: ‘#999’,
cursor: ‘pointer’,
},
circle: {
display: ‘inline-block’,
background: ‘#28a745’,
width: ‘8px’,
height: ‘8px’,
borderRadius: ‘50px’,
marginRight: ‘4px’,
},
stateText: {
color: ‘#28a745’,
},
head: {
width: ‘50px’,
height: ‘50px’,
borderRadius:‘25px’,
},
};