javascript - 如何在 React Table 中固定某些列并使某些列可拖动 - ReactJS

Question

我正在按照 React Table 的这个示例来实现 React Table 列中的拖放功能。

https://codesandbox.io/s/zn9n6xpwk3

每当我引入子列时，我发现代码无法正常工作。这是我的演示 - https://codesandbox.io/s/jpzwmvj7py

我有 4 列，第 1、2 和 3 列是简单列，而第 4 列有子列。现在我试图保持 col 4 固定并尝试重新排列 col 1、2 和 3。但是我无法固定 col 4 并且没有得到预期的结果。由于拖放，第 1、2 和 3 列可以互换位置，但第 4 列应固定且不应更改其位置。请帮助我了解我做错的地方。我是 React 的初学者。

Answer 1

问题是在您的 DraggableTable 代码中。它接受所有给定的标题并使其可拖动。该类的工作方式是将 CSS 类应用于 header ——构成 header 的跨度。

您可以在 DraggableTable 中看到:

const cols = columns.map(col => ({
  ...col,
  Header: <span className="draggable-header">{col.Header}</span>
}));

该代码在 render() 方法中。在 React 中，调用 render() 后，回调 componentDidMount()触发器。这里重要的是 DOM 节点在代码在此函数中执行时实际存在。

此类仅将拖动行为应用于渲染中应用了 CSS 选择器的 DOM 节点。正如您在 mountEvents() 函数中所见:

const headers = Array.prototype.slice.call(
  document.querySelectorAll(".draggable-header")
);

headers.forEach((header, i) => {
... add drag logic ...
}

因此，为了使事物可选地不可拖动，我在 index.js 中的 header 定义中添加了一个属性。然后在我们创建标题的渲染器中，我在添加添加拖动行为的 CSS 类之前检查该属性。

索引.js

 {
    Header: "Status",
    noDrag: true,
 ....

DraggableTable.js

Header: <span className={ col.noDrag ? "":"draggable-header"}>{col.Header}</span>

Here's a fiddle