AG-Grid-React：如何获取用户输入的列筛选器值并更新Redux状态？

你需要在onFilterChanged回调中获取AgGrid的筛选模型，再通过Redux action更新状态，具体步骤如下：

• 获取筛选模型：通过AgGrid实例的getFilterModel()方法，拿到当前所有列的筛选配置
• 触发Redux更新：调用Redux的dispatch方法，将筛选模型传入action，更新全局状态

修改后的组件代码（函数组件示例） #

import { useDispatch } from 'react-redux';
import { updateFilterState } from './your-redux-actions-path'; // 替换为你的action文件路径

// 组件内部逻辑
const dispatch = useDispatch();

<AgGridReact
    rowData={rowData}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    animateRows={true}
    onFilterChanged={(e) => {
        // 获取当前筛选模型
        const currentFilterModel = e.api.getFilterModel();
        // 触发Redux action更新状态
        dispatch(updateFilterState(currentFilterModel));
    }}
></AgGridReact>

对应的Redux Action示例 #

// your-redux-actions.js
export const updateFilterState = (filterModel) => ({
    type: 'UPDATE_FILTER_STATE',
    payload: filterModel
});

对应的Redux Reducer示例 #

// your-redux-reducer.js
const initialState = {
    filterModel: {}
};

export const yourReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_FILTER_STATE':
            return {
                ...state,
                filterModel: action.payload
            };
        default:
            return state;
    }
};

额外说明 #

• 如果只需要单一列的筛选数据，可以用e.api.getColumnFilter('目标列ID')单独获取该列的筛选配置
• 确保组件已正确连接Redux：函数组件使用useDispatch/useSelector，类组件使用connect方法映射dispatch

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A