我想当然地以为只需dataSource转变,那末<Table>
组件就会从新衬着,
然则有一种特殊情况破例:
在onFilter()
中不写挑选前提,在挪用filterDropdown
进行列挑选的时刻,经由过程handleSearch
转变/保留dataSource
的状况,此时<Table>
从新衬着,然则拿的不是dataSource={xxx}
,而是拿的filterDropdown
中的onFilter()
中的dataSource
,而onFilter
中是没有写代码的,所以返回暂无数据
。
PS:
诠释下我不在onFilter()
中写代码的缘由,由于我已将dataSource保留到state中,所以须要setState
去变动dataSource
数据,然则onFilter()
要领是在componentDidUpdate()
周期挪用的,所以setState
会报错,所以我想到了在onClick中setState,但如许console.log出来,dataSource变动了,然则table显现暂无数据。
示例代码:
handleSearch=()=>{
this.setState({dataSource:dataSourceB})
}
getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys, selectedKeys, confirm, clearFilters,
}) => (
<div>
<Input
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
/>
<Button
onClick={() => this.handleSearch(selectedKeys, confirm)}
>
Search
</Button>
</div>
),
//挑选前提,没有写代码,所以没有数据返回,所以是暂无数据
onFilter: (value, record) =>{ },
})
render{
return(
<Table
column={ [{...this.getColumnSearchProps('name')}}
dataSource={dataSourceA}
>
)
}
示例代码地点:
https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
列挑选逻辑的流程图以下:
onFilter()的源码:
getLocalData(state?: TableState<T> | null, filter: boolean = true): Array<T> {
const currentState: TableState<T> = state || this.state;
const { dataSource } = this.props;
let data = dataSource || [];
// 优化当地排序
//就是这行代码,经由过程slice,另开内存来保留dataSource
data = data.slice(0);
const sorterFn = this.getSorterFn(currentState);
if (sorterFn) {
data = this.recursiveSort(data, sorterFn);
}
// 挑选
if (filter && currentState.filters) {
Object.keys(currentState.filters).forEach(columnKey => {
const col = this.findColumn(columnKey) as any;
if (!col) {
return;
}
const values = currentState.filters[columnKey] || [];
if (values.length === 0) {
return;
}
const onFilter = col.onFilter;
data = onFilter
? data.filter(record => {
return values.some(v => onFilter(v, record));
})
: data;
});
}
return data;
}
onFilter()的源码地点:
https://github.com/ant-design/ant-design/blob/d922c377cba03bef39ddb7d271fce3f67c353be9/components/table/Table.tsx
(完)