Beheben von Div-Größenänderungsfehlern in React

Ich lerne ReactJS und habe ein kleines Projekt gestartet, um es zu lernen. Ich versuche, ein Div zu erstellen, dessen Größe durch Ziehen geändert werden kann. Das ist mein 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;

Die Größenänderung auf der rechten Seite funktioniert einwandfrei, die Größenänderung auf der linken Seite jedoch nicht. Wenn ich mit der linken Seite ziehe, ändert sich die Größe des Div tatsächlich korrekt, aber wenn ich die Schaltfläche loslasse, nimmt das Div wieder seine ursprüngliche Position ein.

Haben Sie mein Problem gelöst?

Vielen Dank für deine Antwort :)

P粉204079743322 Tage vor530

Beheben von Div-Größenänderungsfehlern in React

Antworte allen(1)Ich werde antworten