如何在事件中使用反应钩子

用户3689295

我有一个自定义钩子，它从我的 Redux 商店中获取一个项目并将其分派到商店的另一部分。每当将项目放在元素上时，钩子都应该触发。

示例代码：

const useDragged = () => {
    const draggedItem = useSelector((state) => state.draggedItem);
    const dispatch = useDispatch(); 
    dispatch(addItem(draggedItem));
}
//calling useDragged() here works

<MyComponent>
    <div ... onDrop={useDragged}> ... </div> //calling here crashes because I'm calling it from a function
</MyComponent>

我知道这违反了钩子规则，因为它onDrop是一个函数调用，不应在函数内部调用钩子——我只是不知道实现解决方案的“正确”方法。

我也知道我可以通过设置值来解决特定问题，event.dataTransfer.setData但我更感兴趣的是我如何解决事件调用中的钩子一般问题，而不是这里的实际情况。

思南崖曼

您不能在函数内使用钩子。您只能在功能组件的主体内使用它们。您可以从状态中获取变量，无论在哪里。所以你需要这样做：

function ComponentExample(props){
  const draggedItem = useSelector((state) => state.draggedItem);
  const dispatch = useDispatch(); 

  const useDragged = () => {
    dispatch(addItem(draggedItem));
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。