如何在react-admin中让QuickFilter合并多值为列表查询参数？

可以实现，核心思路是自定义支持多选的过滤组件，替代默认的单个QuickFilter，将选中的多个事件值合并为一个数组参数hasEvents传递。以下是具体实现步骤和代码示例：

1. 自定义多选事件过滤组件（复选框组样式） #

创建一个支持多选的组件，使用react-admin的CheckboxGroup，将选中的事件ID集合绑定到hasEvents源上：

import { CheckboxGroup, FilterField } from 'react-admin';

const MultiEventQuickFilter = () => {
  // 根据实际业务定义事件选项
  const eventOptions = [
    { value: 1, label: "Has Event Accepted" },
    { value: 2, label: "Has Event XYZ" },
    { value: 3, label: "Has Event ABC" },
  ];

  return (
    <FilterField source="hasEvents">
      <CheckboxGroup 
        label="关联事件" 
        options={eventOptions} 
        resettable 
      />
    </FilterField>
  );
};

2. 替换原Filter组件中的单个QuickFilter #

将原来的单个QuickFilter替换为自定义的多选组件：

const ClientListsFilter = (props: FilterProps): JSX.Element => {
  return (
    <Filter {...props}>
      <TextInput label="First Name" source="firstName" resettable />
      <TextInput label="Last Name" source="lastName" resettable />
      <TextInput label="E-Mail" source="email" resettable />
      {/* 替换为自定义多选过滤器 */}
      <MultiEventQuickFilter />
    </Filter>
  );
};

3. 处理查询参数序列化（适配后端格式） #

默认情况下react-admin会将数组参数序列化为hasEvents=1&hasEvents=2形式，若后端需要hasEvents=[1,2,3]这种JSON数组格式，可在数据提供者的getList方法中转换参数：

const dataProvider = {
  getList: (resource, params) => {
    const { filter, ...restParams } = params;
    const transformedFilter = { ...filter };
    
    // 将数组转换为JSON字符串格式
    if (transformedFilter.hasEvents) {
      transformedFilter.hasEvents = JSON.stringify(transformedFilter.hasEvents);
    }

    // 调用后端API并传递转换后的参数
    return fetch(`/api/${resource}?${new URLSearchParams(transformedFilter)}`)
      .then(res => res.json())
      .then(data => ({ data, total: data.length }));
  },
  // 其他数据提供者方法...
};

4. 可选：保留QuickFilter的按钮样式 #

如果想要保留原QuickFilter的按钮交互形式，可自定义按钮组组件，通过useFilter钩子手动管理数组的添加/移除：

import { useFilter, Button } from 'react-admin';
import { Box } from '@mui/material';

const EventQuickFilterButtons = () => {
  const { filter, setFilters } = useFilter();
  const currentEvents = filter.hasEvents || [];

  const toggleEvent = (eventId) => {
    const newEvents = currentEvents.includes(eventId)
      ? currentEvents.filter(id => id !== eventId)
      : [...currentEvents, eventId];
    
    // 空数组时移除该参数，避免无效查询
    setFilters({ ...filter, hasEvents: newEvents.length ? newEvents : undefined }, null);
  };

  return (
    <Box display="flex" gap={1} mt={1}>
      <Button 
        variant={currentEvents.includes(1) ? "contained" : "outlined"}
        onClick={() => toggleEvent(1)}
      >
        Has Event Accepted
      </Button>
      <Button 
        variant={currentEvents.includes(2) ? "contained" : "outlined"}
        onClick={() => toggleEvent(2)}
      >
        Has Event XYZ
      </Button>
      <Button 
        variant={currentEvents.includes(3) ? "contained" : "outlined"}
        onClick={() => toggleEvent(3)}
      >
        Has Event ABC
      </Button>
    </Box>
  );
};

直接在Filter组件中使用该按钮组即可，点击按钮会动态更新hasEvents数组参数。

内容的提问来源于stack exchange，提问作者Heikkisorsa