如何在使用reactjs进行拖动时读取材质表列标题数组

如何在使用reactjs进行拖动时读取物料表列标题数组？我使用了OnColumnDraged函数，但仅获取sourceIndex和destinationIndex。我需要获取所有列标题的顺序，以便传递到rest调用以保存新的顺序。

您可以使用

tableRef

属性获取表本身的引用，并在拖动时或在任何时候都可以访问表内部和列信息/数据等内容。

有一种灵活的方法来获取物料表列拖动时按顺序操作

function App() {
  const columns = [...];

  const data = [...];

  function handleColumnDrag() {
    let columnOrder = [];
    columns.forEach(column => {
      columnOrder.push({
        field: column.field,
        columnOrder: column.tableData.columnOrder
      });
    });
    console.log(columnOrder);
  }

  return (
    <div className="App">
      <MaterialTable
        title="Tasks"
        columns={columns}
        data={data}
        onColumnDragged={handleColumnDrag}
      />
    </div>
  );
}

函数应用程序（）{
常量列=[…]；
常量数据=[…]；
函数handleColumnDrag（）{
设columnOrder=[]；
columns.forEach（column=>{
推({
字段：column.field，
columnOrder:column.tableData.columnOrder
});
});
console.log（columnOrder）；
}
返回(
);
}

您可能必须根据API调用更改columnOrder输出的格式

---

演示：

使用tableRef后，最初获取列数组，而拖动时，我不会获取该数组。请举例说明。。