react实现拖拽改变div元素的大小

import React, { useState, useRef } from 'react';
import './ResizableDiv.css'; 

const ResizableDiv: React.FC = () => {
    const [width, setWidth] = useState(200); // 初始宽度
    const resizableRef = useRef<HTMLDivElement>(null);
    const isDragging = useRef(false);

    const handleMouseDown = () => {
        isDragging.current = true;
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (event: MouseEvent) => {
        if (isDragging.current && resizableRef.current) {
            const newWidth = event.clientX - resizableRef.current.getBoundingClientRect().left;
            setWidth(newWidth > 50 ? newWidth : 50); // 设置最小宽度为50px
        }
    };

    const handleMouseUp = () => {
        isDragging.current = false;
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
    };

    return (
        <div
            ref={resizableRef}
            className="resizable-div"
            style={{ width: `${width}px` }}
        >
            <div className="resizable-div-content">
                内容
            </div>
            <div
                className="resizable-div-handle"
                onMouseDown={handleMouseDown}
            />
        </div>
    );
};

export default ResizableDiv;

.resizable-div {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    position: relative;
}

.resizable-div-content {
    flex-grow: 1;
    padding: 10px;
}

.resizable-div-handle {
    width: 10px;
    cursor: ew-resize;
    background-color: #ccc;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}