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

Question

我很难尝试转换我的组件。我的主要困惑是使用状态。在我的基于类的组件中，使用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.setState相等性是什么？

Answer 1

您有 2 个选项可以使用钩子实现更新状态值：

• 第一种选择是声明 2 个状态变量(或更多，具体取决于组件的需要(

...
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}
/>

请记住，在调用当前组件中的函数时，您不再需要使用 'this' 关键字，因为该组件不再是一个类，而是一个函数。