Javascript 使用react钩子将基于类的组件转换为功能组件

我很难转换我的组件。我的主要困惑是使用状态。在我的基于类的组件中，使用

this.setState

很容易更新我的状态，但是使用钩子我对如何实现这一点感到非常困惑

例如，我可以这样做

onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => {
event.preventDefault();
console.log("source", currentDropZoneId);
this.setState({
  dragSource: currentDropZoneId,
  draggedItem: item
});

})

然后把它用在我的JSX上

<Item
 draggable
 onDrag={event => this.onDrag(event, item, dropZone.id)}
 ey={item.id}
 />

this.onDrag（事件、项、dropZone.id）}
ey={item.id}
/>

---

如何使用钩子实现相同的功能？react hooks中的

this.setState

equalEvent是什么？

您有两个选项来实现使用hooks更新状态值：

• 第一个选项是声明2个状态变量（或更多，取决于组件的需要）

。。。
常量[dragSource，setDragSource]=useState（…）；
常量[draggedItem，setDraggedItem]=useState（…）；
...
const onDrag=（事件、项目、currentDropZoneId、currentDropZoneItems）=>{
event.preventDefault（）；
log（“源”，currentDropZoneId）；
setDragSource（currentDropZoneId）；
setDraggedItem（项目）；
}
...
onDrag（事件、项、dropZone.id）}
ey={item.id}
/>

• 第二个选项是为所有字段创建一个状态变量

。。。
常量[状态，设置状态]=使用状态({
dragSource:。。。，
德拉格迪特：。。。
});
...
const onDrag=（事件、项目、currentDropZoneId、currentDropZoneItems）=>{
event.preventDefault（）；
log（“源”，currentDropZoneId）；
设定状态({
dragSource:currentDropZoneId，
draggedItem：项目
});
}
...
onDrag（事件、项、dropZone.id）}
ey={item.id}
/>

请记住，在当前组件内调用函数时，不再需要使用“this”关键字，因为该组件不再是类，而是函数

...
const [dragSource, setDragSource] = useState(...);
const [draggedItem, setDraggedItem] = useState(...);
...

const onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => {
  event.preventDefault();
  console.log("source", currentDropZoneId);
  setDragSource(currentDropZoneId);
  setDraggedItem(item);
}

...

<Item
 draggable
 onDrag={event => onDrag(event, item, dropZone.id)}
 ey={item.id}
 />

...
const [state, setState] = useState({
  dragSource: ...,
  draggedItem: ...
});
...

const onDrag = (event, item, currentDropZoneId, currentDropZoneItems) => {
  event.preventDefault();
  console.log("source", currentDropZoneId);
  setState({
    dragSource: currentDropZoneId,
    draggedItem: item
  });
}

...

<Item
 draggable
 onDrag={event => onDrag(event, item, dropZone.id)}
 ey={item.id}
 />