我正在學習 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粉0068477502024-03-29 13:04:49
這是一個超級煩人的錯誤。問題是,當在 onDrag 期間釋放滑鼠時,會觸發該事件,並將 event.clientX
設為 0。
對此問題的快速解決方法是檢查 event.clientX === 0
是否並從函數中傳回。