需要 react 功能组件中的代码

问：

我正在尝试在 Recatjs 中实现功能组件 foir ItemDragging，但无法完全实现目标。在实施时遇到一些困难。

import React from "react";
import List, { ItemDragging } from "devextreme-react/list";
import { plannedTasks, doingTasks } from "./data.js";
class App extends React.Component {
constructor() {
super();
this.state = {
plannedTasks,
doingTasks
};
this.onDragStart = this.onDragStart.bind(this);
this.onAdd = this.onAdd.bind(this);
this.onRemove = this.onRemove.bind(this);
this.onReorder = this.onReorder.bind(this);
}
onDragStart(e) {
debugger;
e.itemData = this.state[e.fromData][e.fromIndex];
}
onAdd(e) {
debugger;
const tasks = this.state[e.toData];
this.setState({
[e.toData]: [
...tasks.slice(0, e.toIndex),
e.itemData,
...tasks.slice(e.toIndex)
]
});
}
onRemove(e) {
debugger;
const tasks = this.state[e.fromData];
this.setState({
[e.fromData]: [
...tasks.slice(0, e.fromIndex),
...tasks.slice(e.fromIndex + 1)
]
});
}
onReorder(e) {
debugger;
this.onRemove(e);
this.onAdd(e);
}
render() {
return (
<div className="widget-container">
   <List dataSource={this.state.plannedTasks} keyExpr="id">
      <ItemDragging
         allowReordering={true}
         group="tasks"
         data="plannedTasks"
         onDragStart={this.onDragStart}
         onAdd={this.onAdd}
         onRemove={this.onRemove}
         onReorder={this.onReorder}
         ></ItemDragging>
   </List>
   <List dataSource={this.state.doingTasks} keyExpr="id">
      <ItemDragging
         allowReordering={true}
         group="tasks"
         data="doingTasks"
         onDragStart={this.onDragStart}
         onAdd={this.onAdd}
         onRemove={this.onRemove}
         onReorder={this.onReorder}
         ></ItemDragging>
   </List>
</div>
);
}
}
export default App;

'在下面的链接中找到完整的例子

https://codesandbox.io/s/item-drag-drop-devextreme-list-forked-75gqk3

我正在尝试在功能组件的react中实现上述代码，但面临一些问题 有人可以帮忙将其转换为功能性 React 组件吗？