使用反应挂钩将基于类的组件转换为功能组件[重复]

【问题标题】：Converting class based component to functional component using react hooks [duplicate]使用反应挂钩将基于类的组件转换为功能组件[重复]
【发布时间】：2020-05-18 17:24:31
【问题描述】：

我很难转换我的组件。我的主要困惑是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}
 />

如何使用钩子实现相同的功能？ this.setState 在 react hooks 中是什么意思？

【问题讨论】：

标签： javascript reactjs oop react-hooks

【解决方案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”关键字，因为组件不再是类，而是变成了函数。

【讨论】：