Menyelesaikan ralat saiz semula Div dalam React

Question

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 :)

Answer 1

Ini adalah pepijat yang sangat menjengkelkan. Masalahnya ialah apabila tetikus dilepaskan semasa onDrag, acara dilepaskan dan event.clientX ditetapkan kepada 0.

Penyelesaian cepat untuk masalah ini adalah untuk menyemak sama ada event.clientX === 0 adalah dan mengembalikannya daripada fungsi.