javascript - 在 react-table 中，我结合了基本的排序和调整大小示例，但想在调整列大小时抑制排序

Question

我在 resizing 上结合了两个最基本的例子和 column sorting .现在，如果我单击下面示例中的调整大小对象(蓝色条)，该列将同时调整大小和排序。我想在调整大小时抑制排序。

参见:第 106 行

  {/* Use column.getResizerProps to hook up the events correctly */}
  <div
  {...column.getResizerProps()}
  className={`resizer ${column.isResizing ? "isResizing" : ""}`}
  />

https://codesandbox.io/s/react-tablev2-stt1z

我怀疑我需要以某种方式覆盖 OnClick 事件处理程序以调用“stopPropagation”，同时仍然调用原始处理程序。有没有简单的方法可以做到这一点？如果没有，如何处理？

我对 js/react 很陌生

Answer 1

对于那些使用 React 的人，请将 onClick 添加到您添加了 getResizeProps() 的 div。让 onClick 防止默认并停止传播。这将阻止在单击调整大小的 div 时进行排序。

<Table.Header >
    {headerGroups.map((headerGroup: any) => (
        <Table.Row {...headerGroup.getHeaderGroupProps()} id={'column-header'}>
            {headerGroup.headers.map((column: any) => (
                <Table.HeaderCell {...column.getHeaderProps(column.getSortByToggleProps())}
                                  className={'table-header-cell column-name'}
                                  textAlign={'center'}>
                    {column.render('Header')}
                    <span>
                        {column.isSorted ? column.isSortedDesc ?
                        <Icon name={'sort down'}/> : <Icon name={'sort up'}/> : ''}
                    </span>
                    <div
                        {...column.getResizerProps()}
                        className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
                        onClick={(e)=>{e.preventDefault();e.stopPropagation()}}/>
                </Table.HeaderCell>
            ))}
        </Table.Row>
    ))}
</Table.Header>