我在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非常陌生
对于那些使用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>
发生此问题是由于
中有“ resizer” div<div {...column.getHeaderProps(column.getSortByToggleProps())}>
您可以更新jsx结构，如下所示：
<div>
{headerGroups.map(headerGroup => (
<div {...headerGroup.getHeaderGroupProps()} className="tr">
{headerGroup.headers.map(column => (
<div className="th">
<div {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
{/* Add a sort direction indicator */}
<span>
{column.isSorted
? column.isSortedDesc
? " ?"
: " ?"
: ""}
</span>
{/* Use column.getResizerProps to hook up the events correctly */}
</div>
<div {...column.getResizerProps()} className={`resizer ${column.isResizing ? "isResizing" : ""}`} />
</div>
))}
</div>
))}
</div>
您可能需要相应地更新CSS