Reproduction link
import React from 'react';
import './index.css';
import { SearchOutlined } from '@ant-design/icons';
import { Input, Table } from 'antd';
import type { ColumnType, ColumnsType } from 'antd/es/table';
import type { FilterDropdownProps } from 'antd/es/table/interface';
interface DataType {
key: string;
name: string;
age: number;
address: string;
}
type DataIndex = keyof DataType;
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
const FilterSearch: React.FC<FilterDropdownProps> = (props) => {
console.log('filter search visible change', props.visible);
return (
<div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
<Input style={{ marginBottom: 8, display: 'block' }} />
</div>
);
};
const App: React.FC = () => {
const getColumnSearchProps = (
dataIndex: DataIndex
): ColumnType<DataType> => ({
filterDropdown: (filterDropdownProps) => (
<FilterSearch {...filterDropdownProps} />
),
filterIcon: (filtered: boolean) => (
<SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
),
});
const columns: ColumnsType<DataType> = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '30%',
...getColumnSearchProps('name'),
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '20%',
...getColumnSearchProps('age'),
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
...getColumnSearchProps('address'),
sorter: (a, b) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];
return <Table columns={columns} dataSource={data} />;
};
export default App;
https://stackblitz.com/edit/react-b86g5m-qb2mdm?file=demo.tsx
Steps to reproduce
点击Name列的搜索按钮查看日志输出
What is expected?
当DropDown隐藏后能够输出
filter search visible change false
回退到5.4.7结果是正常的,下面是5.4.7的示例
https://stackblitz.com/edit/react-b86g5m-ue6ec1?file=demo.tsx
What is actually happening?
当DropDown隐藏后不会有任何日志输出
| Environment | Info |
| ------------ | ------------ |
| antd | 5.12.4 |
| React | 18.2 |
| System | windows 11 |
| Browser | chrome 120.0.6099.110 |
6条答案
按热度按时间tv6aics11#
Start a new pull request in StackBlitz Codeflow .
8fsztsew2#
使用
onFilterDropdownOpenChange
来监听和收集筛选菜单显示状态,这个是更准确的用法。https://stackblitz.com/edit/react-b86g5m-ue6ec1?file=demo.tsx
filterDropdown 是渲染函数,显示隐藏过程中没必要重复 rerender。
ekqde3dh3#
@afc163 这样的话就没办法在
FilterSearch
组件中根据visible变化做一些操作,比如:隐藏时自动执行一次筛选。需要在组件外部实现,对组件复用太不方便了scyqe7ek4#
现在隐藏 dropdown 时会 memo 住内容,不能通过渲染来执行回调
s6fujrry5#
props没有变化时memo是合理的,但
FilterDropdownProps
中的visible属性改变了,我觉得不应该memoux6nzvsh6#
Can someone please look into this issue and fix this or suggest any other alternatives?