Javascript 使用行拖放和拖动列对数据网格进行反应，以便将要素重新排序到一起

我正在尝试在我的项目中使用，我想使用行拖放和拖动列来重新排列功能

我试图通过传递ReactDataGrid列属性的

draggable:true

并用DraggableHeader.DraggableContainer包装ReactDataGrid和draggable.Container来实现这一点

它使列标题可移动，但不会在DragTableContainer中触发onHeaderDrop操作，并给出了控制台错误

未捕获类型错误：无法读取未定义的属性“id”

我根据上面的描述进行更改

const ReactDataGrid=require（'react-data-grid'）；
const exampleWrapper=require（'../components/exampleWrapper'）；
const React=require（'React'）；
常数{
可拖动：{容器，行操作cell，DropTargetRowContainer}，
数据：{选择器}，
DragTableHeader:{DragTableContainer}
}=require（'react-data-grid-addons'）；
从“道具类型”导入道具类型；
const RowRenderer=DropTargetRowContainer（ReactDataGrid.Row）；
类示例扩展了React.Component{
静态类型={
rowKey:PropTypes.string.isRequired
};
静态defaultProps={rowKey:'id'}；
构造函数（道具、上下文）{
超级（道具、背景）；
此参数为。\u列=[
{
键：“id”，
名称：“ID”，
德拉格布尔：是的
},
{
关键字：“任务”，
姓名：'头衔'，
德拉格布尔：是的
},
{
关键字：“优先级”，
名称：“优先级”，
德拉格布尔：是的
},
{
关键字：“issueType”，
名称：“问题类型”，
德拉格布尔：是的
}
];
this.state={rows:this.createRows（1000），selectedIds:[1,2]}；
}
getRandomDate=（开始、结束）=>{
返回新日期（start.getTime（）+Math.random（）*（end.getTime（）-start.getTime（））.toLocaleDateString（）；
};
createRows=（numberOfRows）=>{
让行=[]；
for（设i=1；i{
返回此.state.rows[i]；
};
IsDragedRowselected=（selectedRows，rowDragSource）=>{
如果（selectedRows&&selectedRows.length>0）{
让key=this.props.rowKey；
返回selectedRows.filter（r=>r[key]==rowDragSource.data[key]）。长度>0；
}
返回false；
};
重组行=（e）=>{
让selectedRows=Selectors.getSelectedRowsByKey（{rowKey:this.props.rowKey，selectedKeys:this.state.SelectedId，rows:this.state.rows}）；
让draggedRows=this.IsDraggeDrowsSelected（selectedRows，e.rowSource）？selectedRows:[e.rowSource.data]；
让undraggedRows=this.state.rows.filter（函数（r）{
返回draggedRows.indexOf（r）=-1；
});
设args=[e.rowTarget.idx，0].concat（draggedRows）；
Array.prototype.splice.apply（undraggedRows，args）；
this.setState（{rows:undraggedRows}）；
};
onrowselected=（行）=>{
this.setState（{selectedIds:this.state.selectedIds.concat（rows.map（r=>r.row[this.props.rowKey]）））；
};
OnRowsSelected=（行）=>{
让rowIds=rows.map（r=>r.row[this.props.rowKey]）；
this.setState（{selectedIds:this.state.selectedIds.filter（i=>rowIds.indexOf（i）=-1）}）；
};
render（）{
返回(
{console.log（'column dropped'）；}
>
);
}
}
module.exports=exampleWrapper({
WrappedComponent：示例，
示例名称：“行重新排序”，
exampleDescription:'此示例演示如何使用可拖动React插件中的组件将单个或多个行拖动到不同的位置'，
示例路径：'./scripts/example23 row reordering.js'
});