React Table 如何给表头添加onClick函数且不禁用useSortBy排序功能

核心逻辑：React Table 的 getSortByToggleProps() 方法返回的属性对象中已经内置了触发排序的点击事件回调，不可直接覆盖该回调，只需在自定义onClick中先调用这个内置回调，再执行自己的逻辑，即可同时保留排序功能和自定义点击逻辑。

修改后的完整代码如下：

function renderTableHeader() {
  const headers = headerGroups.map(headerGroup => {
    return (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th
            {...column.getHeaderProps(
              column.sortable ? {
                // 合并排序属性和自定义onClick配置
                ...column.getSortByToggleProps(),
                onClick: (e) => {
                  // 先调用React Table内置的排序点击逻辑，保证排序功能正常
                  column.getSortByToggleProps().onClick(e);
                  // 下方添加你自己的自定义点击逻辑
                  console.log('当前点击列ID：', column.id);
                }
              } : {}
            )}
          >
            {(column.render("Header"))}
            <span>
              <i className={determineSortState(column)} />
            </span>
          </th>
        ))}
      </tr>
    );
  });
}

注意事项 #

• 必须优先执行内置的排序点击回调，再执行自定义逻辑，避免事件行为被拦截后排序失效
• 若自定义逻辑需要调用 e.stopPropagation() 或 e.preventDefault()，请放在内置排序回调执行之后调用
• 非可排序列不需要额外处理，直接传入空对象即可

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