Saya sedang belajar ReactJS dan saya memulakan projek kecil untuk mempelajarinya. Saya cuba mencipta div yang boleh diubah saiznya dengan menyeret. Ini kod saya:

import { useRef, useState } from 'react';
import PostViewer from '../PostViewer/PostViewer';
import './ContainerResize.scss'
import * as htmlToImage from 'html-to-image';
import { toPng } from 'html-to-image';
import download from 'downloadjs'


function savePng() {
    htmlToImage.toPng(document.getElementById('Resizable'))
        .then(function (dataUrl) {
            download(dataUrl, 'tweet.png');
        });
}

const ContainerResize = (props) => {

    const [initialPos, setInitialPos] = useState(null);
    const [initialSize, setInitialSize] = useState(null);
    const resizable = useRef(null);

    const initial = (e) => {
        setInitialPos(e.clientX);
        setInitialSize(resizable.current.offsetWidth);
        console.log(resizable.current.offsetWidth)
    }

    const resizeLeft = (e) => {
        resizable.current.style.width = `${parseInt(initialSize) + parseInt(initialPos - e.clientX)}px`;
    }

    const resizeRight = (e) => {
        resizable.current.style.width = `${parseInt(initialSize) + parseInt(e.clientX - initialPos)}px`;
    }

    return (
        <div className="containerResize">
            <button onClick={savePng}>Save</button>
            <div
                id="Draggable"
                draggable="true"
                onDragStart={initial}
                onDrag={resizeLeft}
            />
            <div id="Resizable" ref={resizable}>
                <PostViewer tweetParam={props.tweetParam} />
            </div>
            <div
                id="Draggable"
                draggable="true"
                onDragStart={initial}
                onDrag={resizeRight}
            />
        </div>
    );
}

export default ContainerResize;

Ubah saiz di sebelah kanan berfungsi dengan baik, tetapi ubah saiz di sebelah kiri tidak. Sebenarnya, apabila saya menyeret dengan sebelah kiri, div berubah saiz dengan betul, tetapi apabila saya menjatuhkan butang, div mengambil semula kedudukan asalnya.

Adakah anda telah menyelesaikan masalah saya?

Terima kasih banyak atas balasan anda :)