Résoudre les erreurs de redimensionnement de Div dans React

Question

J'apprends ReactJS et j'ai démarré un petit projet pour l'apprendre. J'essaie de créer un div qui peut être redimensionné en le faisant glisser. Voici mon code :

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;

Redimensionner à droite fonctionne bien, mais pas à gauche. En fait, quand je fais glisser avec le côté gauche, le div se redimensionne correctement, mais quand je lâche le bouton, le div reprend sa position initiale.

Avez-vous résolu mon problème ?

Merci beaucoup pour votre réponse :)

Answer 1

C'est un bug super ennuyeux. Le problème est que lorsque la souris est relâchée pendant onDrag, l'événement est déclenché et event.clientX est défini sur 0.

Une solution rapide à ce problème consiste à vérifier si event.clientX === 0 l'est et à le renvoyer depuis la fonction.