REACT-antd的table的筛选问题
REACT-antd的table的筛选问题
作为一个刚刚接触react的小白，最近在学习的过程中碰到了不少问题，其中有些不可避免且努力了好久都没什么效果的问题，姑且先埋个坑吧，说不定以后就会了呢，要是有大牛看见愿意扶我一把那就更好了。
好，接下来进入正题。问题1是这样的：在我使用antd的table的时候，发现其中的筛选功能好像是写死了的，比如antd中原来的筛选功能是写在name上的，然后我把它改成age之后，就报错了：TypeError: record.age.includes is not a function.感觉应该是record里面的数据的问题，但是我又看不到也没啥办法。
然后是问题2：在实现搜索功能的时候，还原搜索使用antd给的办法没问题，在67、68行那里，
import React from 'react';
import { Table, Button , Input , Icon } from 'antd';
import Highlighter from 'react-highlight-words';
import axios from 'axios';
import './style.css';
class MyTable extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null,
searchText: '',
data: []
};
handleChange = (pagination, filters, sorter) => {
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
};
//还原筛选
clearFilters = () => {
this.setState({ filteredInfo: null });
};
//还原排序
clearSorted = () => {
this.setState({ sortedInfo: null });
};
//还原搜索
clearSearch = clearFilters => {
clearFilters();
this.setState({ searchText: null });
};
//一键还原
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null,
searchText: null
});
};
getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
this.searchInput = node;
}}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text.toString()}
/>
),
});
handleSearch = (selectedKeys, confirm) => {
confirm();
this.setState({ searchText: selectedKeys[0]});
};
handleReset = clearFilters => {
clearFilters();
this.setState({ searchText: '' });
};
render() {
let { sortedInfo, filteredInfo , data } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [
{
width: '10%',
title: 'NO.',
dataIndex: 'num',
flex: 'left',
sorter: (a, b) => a.num - b.num,
sortOrder: sortedInfo.columnKey === 'num' && sortedInfo.order,
},
{
width: '20%',
title: 'Name',
dataIndex: 'name',
...this.getColumnSearchProps('name'),
sorter: (a, b) => {
var stringA = a.name.toUpperCase(); // ignore upper and lowercase
var stringB = b.name.toUpperCase(); // ignore upper and lowercase
if (stringA < stringB) {
return -1;
}
if (stringA > stringB) {
return 1;
}
// names must be equal
return 0;
},
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
},
{
width: '15%',
title: 'Age',
dataIndex: 'age',
filters: [{ text: '18', value: '18' }, { text: '28', value: '28' },{ text: '38', value: '38' }],
filteredValue: filteredInfo.age || null,
onFilter: (value, record) => record.age.includes(value) ,
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
},
{
width: '25%',
title: 'phone',
dataIndex: 'phone',
...this.getColumnSearchProps('phone')
},
{
width: '30%',
title: 'idnumber',
dataIndex: 'idnumber',
...this.getColumnSearchProps('idnumber')
}
];
return (
<div>
<div className="table-operations">
<Button onClick={this.clearSorted}>Clear Sorted</Button>
<Button onClick={() => this.handleReset(this.clearFilters)}>Clear Search</Button>
<Button onClick={this.clearFilters}>Clear Filters</Button>
<Button onClick={this.clearAll}>Clear All</Button>
</div>
<Table columns={columns} dataSource={data} onChange={this.handleChange} pagination={false} scroll={{ x: 500, y: 300 }} bordered />
</div>
);
}
componentDidMount() {
axios.get('/api/people.json')
.then(res => {
const data = res.data.data.map(obj => obj.data);
this.setState({data});
}).catch(() => {alert('error')});
}
}
export default MyTable;
然后我的data数据是用axios请求的，格式是这样的
{
"success": true,
"data":[{
"data": {
"key": 1,
"num": 1,
"name": "John",
"age": 32,
"phone": 11111111111,
"idnumber":330381111111111111
}
},
{
"data": {
"key": 2,
"num": 2,
"name": "John Brown",
"age": 33,
"phone": 15361,
"idnumber":1351
}
},
{
"data": {
"key": 3,
"num": 1,
"name": "John Brown",
"age": 22,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 4,
"num": 1,
"name": "18",
"age": 19,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 5,
"num": 1,
"name": "John Brown",
"age": 34,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 6,
"num": 1,
"name": "John Brown",
"age": 36,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 7,
"num": 1,
"name": "John Brown",
"age": 18,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 8,
"num": 1,
"name": "John Brown",
"age": 42,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 9,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 10,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 11,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 12,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 13,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 14,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 15,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 16,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
},
{
"data": {
"key": 17,
"num": 1,
"name": "John Brown",
"age": 32,
"phone": 1561,
"idnumber":151
}
}]
}