Question

我正在跟踪React Table的这个示例，以在React Table列中实现拖放功能。

我已经看到，每当我介绍子列时代码都无法正常工作。这是我的演示-https://codesandbox.io/s/jpzwmvj7py

我有4列，第1列，第2列和第3列是简单列，而第4列有子列。现在，我试图使第4列固定不变，并尝试重新排列第1、2和3列。但是我无法使第4列固定不变，也无法获得理想的结果。由于拖放，第1、2和3列可以互换位置，但第4列应固定并且不应更改其位置。请帮助我了解我在哪里做错了。我是React的一个完整的初学者。

Answer 1

问题在于您的DraggableTable代码中。它采用所有给定的标题并使之可拖动。该类的工作方式是将CSS类应用于标头，即构成标头的范围。

您可以在DraggableTable中看到它：

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

该代码在render()方法中。作为响应，在调用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的标头定义中添加了一个属性。然后在渲染中创建标题的渲染器中，我检查了该属性，然后添加了添加了拖动行为的CSS类。

index.js

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

DraggableTable.js

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

Here's a fiddle

如何在React表中固定一些列并拖动某些列-ReactJS

1 个答案: