如何使用React挂钩处理React Svg拖放

Question

我正在尝试在SVG形状上实现拖放。我成功地使它与使用类组件一起工作。这是代码沙盒的链接：https://codesandbox.io/s/qv81pq1roq

但现在我想通过使用新的React api和一个定制的Hook来提取这个逻辑，该Hook将能够将这个功能添加到一个功能组件中。我尝试了很多方法，但都不起作用。这是我最后一次尝试：

https://codesandbox.io/s/2x2850vjk0

我怀疑添加和删除事件侦听器的方式有问题。。。以下是我的问题：

您认为，将这个DnDSVG逻辑放到自定义Hook中是可能的吗？如果是，你知道我做错了什么吗？

Answer 1

我修复了这里的示例-https://codesandbox.io/s/2w0oy6qnvn

在你的钩子中有很多问题，例如：

1. setPosition不同于setState。它不进行浅合并，而是用新值替换整个对象，因此必须使用Object.assign()或spread运算符才能与以前的值合并。此外，如果您在设置新值时需要引用一个回调值，setPosition()钩子会将提供上一个状态值的回调值作为第一个参数。

2. 与类不同，handleMouseMove函数在每次渲染中都会重新创建，因此document.removeEventListener('mousemove', handleMouseMove)在调用document.addEventListener('mousemove', handleMouseMove)时不再引用初始handleMouseMove值。解决方法是使用useRef，它创建一个在组件的整个生命周期中都存在的对象，非常适合保留对函数的引用。

3. handleMouseDown中的事件参数和您在setPosition中引用的事件参数不相同。由于React使用事件池并重用事件，因此setPosition中的事件可能已经与传递到handleMouseDown中的事件不同。解决方法是首先获取pageX和pageY的值，这样在setPosition中就不需要依赖于事件对象。

我用您需要注意的部分注释了下面的代码。

const Circle = () => {
const [position, setPosition] = React.useState({
x: 50,
y: 50,
coords: {},
});

// Use useRef to create the function once and hold a reference to it.
const handleMouseMove = React.useRef(e => {
setPosition(position => {
const xDiff = position.coords.x - e.pageX;
const yDiff = position.coords.y - e.pageY;
return {
x: position.x - xDiff,
y: position.y - yDiff,
coords: {
x: e.pageX,
y: e.pageY,
},
};
});
});
const handleMouseDown = e => {
// Save the values of pageX and pageY and use it within setPosition.
const pageX = e.pageX; 
const pageY = e.pageY;
setPosition(position => Object.assign({}, position, {
coords: {
x: pageX,
y: pageY,
},
}));
document.addEventListener('mousemove', handleMouseMove.current);
};
const handleMouseUp = () => {
document.removeEventListener('mousemove', handleMouseMove.current);
// Use Object.assign to do a shallow merge so as not to 
// totally overwrite the other values in state.
setPosition(position =>
Object.assign({}, position, {
coords: {},
})
);
};
return (
<circle
cx={position.x}
cy={position.y}
r={25}
fill="black"
stroke="black"
strokeWidth="1"
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
/>
);
};
const App = () => {
return (
<svg
style={{
border: '1px solid green',
height: '200px',
width: '100%',
}}
>
<Circle />
</svg>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

Answer 2

这里有一个通用的自定义钩子，我一直在使用它来注册SVG元素上的拖动事件。

import { useState, useEffect, useCallback, useRef } from 'react'
// You may need to edit this to serve your specific use case
function getPos(e) {    
return {
x: e.pageX,
y: e.pageY,
}
}
// from https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state    
function usePrevious(value) {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}
export function useDrag({ onDrag, onDragStart, onDragEnd }) {
const [isDragging, setIsDragging] = useState(false)
const handleMouseMove = useCallback(
(e) => {
onDrag(getPos(e))
}, 
[onDrag]
)
const handleMouseUp = useCallback(
(e) => {
onDragEnd(getPos(e))
document.removeEventListener('mousemove', handleMouseMove);
setIsDragging(false)
}, 
[onDragEnd, handleMouseMove]
)
const handleMouseDown = useCallback(
(e) => {
onDragStart(getPos(e))
setIsDragging(true)
document.addEventListener('mousemove', handleMouseMove)
}, 
[onDragStart, handleMouseMove]
)
const prevMouseMove = usePrevious(handleMouseMove)
useEffect(
() => {
document.removeEventListener('mousemove', prevMouseMove);
if(isDragging) {
document.addEventListener('mousemove', handleMouseMove)
}
},
[prevMouseMove, handleMouseMove, isDragging]
)
useEffect(
() => {
if (isDragging) {
document.addEventListener('mouseup', handleMouseUp)
}
return () => document.removeEventListener('mouseup', handleMouseUp)
},
[isDragging, handleMouseUp]
)
return handleMouseDown
}