Question

我很难转换组件。我的主要困惑是useState。在我基于类的组件中，使用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}
 />

如何通过钩子实现相同的功能？什么是React钩子中的this.setState等价物？

Answer 1

您有2个选项可以通过钩子来更新状态值：

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

convertion

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

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

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

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

1 个答案: