如何通过代码设置react-data-grid过滤器？实现双击单元格自动过滤

我刚好有过类似的实现经验，react-data-grid的过滤器是通过受控的filterModel状态来管理的，你只需要在双击事件中更新这个状态就能实现需求。下面是具体的步骤和代码示例：

核心思路 #

react-data-grid使用filterModel prop来控制所有列的过滤器配置，它是一个键值对对象：键是列的key（或field，取决于你的列定义），值是包含operator（操作符）和value（过滤值）的对象。我们要做的就是在双击单元格时，生成对应的filterModel并更新状态。

具体实现步骤 #

1. 维护filterModel状态
   在你的组件中，用useState来管理过滤器模型：

   import { useState } from 'react';
   import ReactDataGrid from 'react-data-grid';
   
   const YourGridComponent = () => {
     // 初始化空的过滤器模型
     const [filterModel, setFilterModel] = useState({});
     // 你的列配置和行数据
     const columns = [...];
     const rows = [...];
   

2. 编写双击事件处理函数
   拿到双击的列和对应的值，生成新的filterModel（这里我们替换所有现有过滤器，只保留当前列的相等过滤）：

   const handleCellDoubleClick = (args) => {
       const { column, row } = args;
       // 获取列的唯一标识（根据你的列配置，可能是column.key或column.field）
       const columnIdentifier = column.key;
       // 获取当前单元格的值
       const targetValue = row[columnIdentifier];
   
       // 更新filterModel，设置当前列的相等过滤
       setFilterModel({
         [columnIdentifier]: {
           operator: 'equals', // 这里的操作符要和你的过滤器支持的一致
           value: targetValue
         }
       });
     };
   

3. 将filterModel和事件绑定到表格
   把状态和事件处理函数传给react-dataGrid组件：

   return (
       <ReactDataGrid
         columns={columns}
         rows={rows}
         filterModel={filterModel}
         onCellDoubleClick={handleCellDoubleClick}
         // 其他已有的props（比如自定义过滤器配置等）
       />
     );
   };
   
   export default YourGridComponent;
   

注意事项 #

• 操作符匹配：如果你的自定义过滤器使用的不是'equals'作为相等操作符（比如有的自定义过滤器用'='），请替换成你过滤器支持的操作符。
• 追加过滤器 vs 替换过滤器：上面的代码是替换所有现有过滤器，如果你希望保留其他过滤器并追加当前列的过滤，可以用扩展运算符：

  setFilterModel(prevModel => ({
    ...prevModel,
    [columnIdentifier]: { operator: 'equals', value: targetValue }
  }));
  

• 自定义过滤器兼容：确保你的自定义过滤器组件能够正确处理operator: 'equals'的情况，比如在过滤器的选项中包含该操作符。

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