在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

此问题是由于'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