这问题我之前做项目时也碰到过，Form里的按钮默认会触发提交行为，AG-Grid内置的筛选按钮刚好踩了这个坑！下面给你两个靠谱的解决方案：

方案一：自定义表头组件（Header Component） #

直接替换AG-Grid默认的表头组件，在自定义组件里给筛选按钮绑定点击事件，手动阻止默认行为。

1. 先创建自定义表头组件：

// 自定义表头组件
function CustomHeaderComponent(props) {
  // 处理筛选按钮点击，先阻止默认行为再触发AG-Grid原生筛选逻辑
  const handleFilterClick = (e) => {
    e.preventDefault();
    props.showFilter();
  };

  return (
    <div className="ag-header-cell">
      <span className="ag-header-cell-label">
        {props.displayName}
        {/* 渲染带自定义事件的筛选按钮，显式设置type避免被识别为提交按钮 */}
        <button 
          className="ag-header-cell-menu-button"
          onClick={handleFilterClick}
          type="button"
        >
          <span className="ag-icon ag-icon-filter"></span>
        </button>
      </span>
    </div>
  );
}

2. 在列定义里指定使用这个自定义组件：

const columnDefs = [
  {
    headerName: "订单编号",
    field: "orderId",
    filter: true,
    headerComponent: CustomHeaderComponent // 绑定自定义表头组件
  },
  // 其他列配置...
];

方案二：利用AG-Grid的onHeaderCellClicked事件监听 #

如果不想自定义表头组件，可以通过全局的表头点击事件判断点击目标，针对性阻止默认行为。

const gridOptions = {
  // 其他网格配置...
  onHeaderCellClicked: (params) => {
    // 找到点击的元素是否是筛选按钮
    const filterButton = params.event.target.closest('.ag-header-cell-menu-button');
    if (filterButton) {
      params.event.preventDefault();
      // 阻止默认提交后，AG-Grid的筛选逻辑会正常执行，无需额外操作
    }
  }
};

额外小技巧 #

还有个更简洁的方法：网格渲染完成后，批量给所有筛选按钮设置type="button"，从根源上避免浏览器把它们识别为Form提交按钮：

gridOptions.api.addEventListener('gridReady', () => {
  const filterButtons = document.querySelectorAll('.ag-header-cell-menu-button');
  filterButtons.forEach(btn => btn.setAttribute('type', 'button'));
});

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