React Hooks:如何调整单个div的大小?

所以我有一个问题,我无法调整单个div的大小,因为mouseup无法正常工作...

    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时mousemove不会停止。

评论
  • 老鸡抓小鹰
    老鸡抓小鹰 回复

    您遇到的问题是因为您在没有任何依赖关系的情况下运行useEffect,这会导致一次又一次地创建订阅,从而在mouseMove处理程序设置状态时引起问题。您只需要在初始渲染时添加一次订阅,然后在卸载时将其删除

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