React-Table中仅让箭头图标触发排序而非整个表头的实现

当前你的问题是因为headerProps中包含了排序的点击事件，直接绑定在<th>上导致点击整个表头都会触发排序。要实现仅点击箭头图标触发排序，只需把排序的点击事件从<th>移到箭头元素上，具体修改如下：

修改思路 #

• 移除<th>上绑定的排序点击事件
• 将排序事件单独绑定到箭头所在的元素上
• 保留表头的其他属性与功能（如列拖拽、列宽调整等）不受影响

修改后的代码 #

<th 
  {...{ ...headerProps, onClick: undefined }} // 移除th上的排序点击事件
  {...attributes} 
  ref={setNodeRef} 
  style={{...headerProps.style, ...style}}
>
  {id !== 'row-drag-handle' && id !== 'expander' && allowColumnReorder && (
    <div {...listeners} className='columnDragHandle'>
      <DragHandle />
    </div>
  )}{' '}
  <div style={{padding: '0.4em'}}>
    {render('Header')}
    {canResize && onColumnResize && (
      <div {...getResizerProps()} className='resizer' />
    )}
    {Boolean(onSortChange) && canSort && (
      <span onClick={headerProps.onClick}> {/* 将排序事件绑定到箭头的span上 */}
        {isSorted ? (<Arrow fill='white' width='10px' />) : ('')}
      </span>
    )}
  </div>
</th>

关键改动说明 #

1. {...{ ...headerProps, onClick: undefined }}：复制headerProps并清空其中的onClick事件，避免点击表头任意位置触发排序
2. <span onClick={headerProps.onClick}>：把原排序点击事件绑定到箭头所在的span元素，仅点击箭头时触发排序逻辑
3. 其余代码保持原样，确保列拖拽、表头渲染、列宽调整等功能正常运行

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