ant-design Table自定义筛选菜单Visible改变后不会触发自定义菜单渲染

gwbalxhn  于 5个月前  发布在  其他
关注(0)|答案(6)|浏览(54)
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 |

8fsztsew

8fsztsew2#

使用 onFilterDropdownOpenChange 来监听和收集筛选菜单显示状态,这个是更准确的用法。

https://stackblitz.com/edit/react-b86g5m-ue6ec1?file=demo.tsx

filterDropdown 是渲染函数,显示隐藏过程中没必要重复 rerender。

ekqde3dh

ekqde3dh3#

@afc163 这样的话就没办法在 FilterSearch 组件中根据visible变化做一些操作,比如:隐藏时自动执行一次筛选。需要在组件外部实现,对组件复用太不方便了

scyqe7ek

scyqe7ek4#

现在隐藏 dropdown 时会 memo 住内容,不能通过渲染来执行回调

s6fujrry

s6fujrry5#

props没有变化时memo是合理的,但 FilterDropdownProps 中的visible属性改变了,我觉得不应该memo

ux6nzvsh

ux6nzvsh6#

Can someone please look into this issue and fix this or suggest any other alternatives?

相关问题