React-Table点击列头同时触发排序与自定义onClick事件报错如何解决？

数据老陈

2026-10-3

React Table表头同时触发排序和自定义点击事件解决方案

报错原因

Cannot read properties of undefined (reading 'persist')报错的根源是React Table内置的排序点击处理逻辑需要调用事件对象的persist()方法做事件持久化，你自定义的点击处理函数没有将原生事件参数透传给内置的headerProps.onClick方法，导致内置方法读取event为undefined触发报错。

解决方法

方式1：手动透传事件（适配现有写法的修改）

修改点击处理函数，接收事件参数并透传给内置的排序逻辑即可：

const headerProps = column.getHeaderProps(column.getSortByToggleProps());

const clickHandler = (e) => {
    // 执行自定义逻辑
    console.log("Hello World");
    // 透传事件参数给内置排序逻辑
    headerProps.onClick(e);
};

return (
    <th {...headerProps} onClick={clickHandler}>
    {/* 表头内容 */}
    </th>
)

方式2：API原生合并（更推荐的写法）

直接在调用getSortByToggleProps时传入自定义onClick，React Table会自动合并内置排序逻辑和你的自定义逻辑，无需手动调用内置方法：

// 直接在获取排序属性时传入自定义点击逻辑
const headerProps = column.getHeaderProps(
  column.getSortByToggleProps({
    onClick: (e) => {
      // 你的自定义逻辑
      console.log("Hello World");
    }
  })
);

return <th {...headerProps}>
  {/* 表头内容 */}
</th>