反应钩子:如何调整单个div的大小?

Question

所以我有这个问题，我无法调整单个div 的大小，因为我的鼠标向上不起作用......

const [ isResizable, setIsResizable ] = useState(false);
const [ newWidth, setIsNewWidth ] = useState(width);
function handleResize() {
setIsResizable(true);
}

function handleMouseMove(event) {
if(isResizable) {
let offsetRight =
document.body.offsetWidth - (event.clientX - document.body.offsetLeft);
let minWidth = 50;
let maxWidth = 700;
if(offsetRight > minWidth && offsetRight < maxWidth) {
setIsNewWidth(offsetRight);
console.log(width);
}
}
}
function handleMouseUp() {
setIsResizable(false);
}
useEffect(() => {
document.addEventListener('mousemove', e => handleMouseMove(e));
document.addEventListener('mouseup', () => handleMouseUp());
});
return (
<div
className={`relative-drawer`}
style={{
width: newWidth,
minWidth: 50
}}>
<div className={"dragable"} onMouseDown={() => handleResize()}></div>
</div>
);

有人对这个问题有答案吗？我已经尝试了很多，但除了调用handleMouseUp时鼠标移动不会停止之外，所有触发器都按预期触发。

Answer 1

您遇到的问题是因为您在没有任何依赖项的情况下运行 useEffect，这会导致一次又一次地创建订阅，从而在 mouseMove 处理程序设置状态时导致问题。您只需在初始渲染时和变量更改时添加一次订阅isResizable

useEffect(() => {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp); 
}
}, [isResizable]);

工作演示

附言您需要更新宽度计算