如何使用 Ant Design 实现自定义复选框组过滤器答案

【问题标题】：How to implement a custom checkbox group filter using Ant Design如何使用 Ant Design 实现自定义复选框组过滤器
【发布时间】：2022-09-28 21:10:34
【问题描述】：

我们有一个带有自定义过滤器（单选组、日期选择器等）的复杂自定义表。现在我们想实现一个 CheckBoxGroup 过滤器，用户可以使用它基于多个值进行过滤。但是实现没有按预期工作（这是自定义过滤器）：

export const CheckBoxGroupFilter = ({ setSelectedKeys, selectedKeys, confirm, clearFilters, filters }) => {
return (
    <div style={{ padding: 8 }}>
        <Space direction=\"vertical\">
            <Checkbox.Group onChange={(checkedValues) => setSelectedKeys(checkedValues)}>
                <Space direction=\"vertical\">
                    {filters?.map((status, index) => (
                        <Checkbox key={status.value} value={status.value}>
                            {status.text}
                        </Checkbox>
                    ))}
                </Space>
            </Checkbox.Group>

            <Divider style={{ marginTop: \'5px\', marginBottom: \'5px\' }} />
            <div>
                <Button
                    type=\"primary\"
                    onClick={() => confirm()}
                    icon={<SearchOutlined />}
                    size=\"small\"
                    style={{ width: 90, marginRight: 8 }}
                >
                    Search
                </Button>
                <Button
                    size=\"small\"
                    style={{ width: 90 }}
                    onClick={() => {
                        clearFilters()
                        confirm()
                    }}
                >
                    Reset
                </Button>
            </div>
        </Space>
    </div>
)}

在自定义表中使用：

             filterDropdown: (props) => {
                  if (column.filterable === false) return null
                  if (column.radioGroupFilter) return <RadioGroupFilter {...props} />
                  if (column.datePickerFilter)
                      return <DatePickerFilter {...props} customDateFormat={column.dateFormat} />
                  if (column.checkBoxGroupFilter)
                      return <CheckBoxGroupFilter {...props} />
                  return <InputTextFilter {...props} searchInputHolder={searchInputHolder} />
              },

目前，按下 Search 按钮调用 cofirm() 会修改 url 查询参数，因此您可以看到例如 status=approved&status=pending，这会过滤第一个结果页面。但是无论是在分页更改还是刷新页面时，表格都会忘记查询参数，并且表格不再被过滤。值保持选中状态。调用 clearFilters() 的重置按钮也不起作用。因此，似乎表的列本身并不知道它已被过滤。

代码 sn-p 证实了这一点，因为过滤后的值不会在 filterIcon 方法中改变颜色：

            filterIcon: (filtered) => {
                  if (column.checkBoxGroupFilter)
                      return <FilterFilled style={{ color: filtered ? \'#1890ff\' : undefined }} />
                  return <SearchOutlined style={{ color: filtered ? \'#1890ff\' : undefined }} />
              },

其他自定义过滤器按预期工作，它们更改了上面 sn-p 中的过滤值。 RadioGroup 过滤器的实现几乎相同。

标签： reactjs antd

【解决方案1】：

我们发现问题是data key和dateIndex不一样。我们将键重命名为状态，因为它将是一个数组，但我们不应该这样做。如果名称是一些，则上述实现可以正常工作，否则表有错误行为

解决方案：当您定义列时，使用相同的键和 dataIndex 名称。

{
        title: 'Status',
        key: 'status',
        dataIndex: 'status',
        checkBoxGroupFilter: true,
        onFilter: (value, record) => {
            return record.status && value
                ? record.status.toString().toLowerCase().includes(value.toString().toLowerCase())
                : ''
        },
        filters: Object.keys(DisplayBookingStatus).map((key) => ({
            text: DisplayBookingStatus[key].toLowerCase(),
            value: key,
        })),
        render: (status: string) => {
            return <ReservationStatus status={DisplayBookingStatus[status?.toLowerCase()] || status} />
        },
    },

【讨论】：