搜尋

首頁  >  問答  >  主體

解決 React 中 Div 大小調整錯誤

我正在學習 ReactJS,並且我開始了一個小專案來學習它。 我嘗試創建一個可以透過拖曳來調整大小的 div。 這是我的程式碼:

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;

右側的調整大小運作正常,但左側的調整大小不起作用。事實上,當我用左側拖曳時,div 會正確調整大小,但是當我放下按鈕時,div 會重新佔據其初始位置。

請問您有解決我的問題嗎?

非常感謝您的回覆:)

P粉204079743P粉204079743242 天前456

全部回覆(1)我來回復

  • P粉006847750

    P粉0068477502024-03-29 13:04:49

    這是一個超級煩人的錯誤。問題是,當在 onDrag 期間釋放滑鼠時,會觸發該事件,並將 event.clientX 設為 0。

    對此問題的快速解決方法是檢查 event.clientX === 0 是否並從函數中傳回。

    回覆
    0
  • 取消回覆