react-rnd靠右顯示的實(shí)現(xiàn)方式
更新時(shí)間：2025年05月28日 15:04:32 作者：Hero_rong
這篇文章主要介紹了react-rnd靠右顯示的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react-rnd靠右顯示
react-rnd是react一個(gè)拖拽的組件
本篇文章是以官方文檔為基礎(chǔ)整理出來的https://www.npmjs.com/package/react-rnd
首先，這個(gè)控件默認(rèn)是顯示在左上角的，但是我這里的需求是要顯示在右下角，研究了一下它的屬性和方法，所有有了這篇文章
靠右顯示
<Rnd
default={{
x: 40,
y: 40,
width: 200,
height: 200
}}
minWidth:{200}
minHeight:{200}
maxWidth:{200}
maxHeight:{200}
position={{x:x,y:y}}
onDragStop={{(e,d)=>{dragStop(e,d)}}}
></Rnd>屬性 default
- 里面的xy是可拖拽的范圍，并不是初始化的位置
屬性 position
- position就是控件在頁面上的位置，x、y值只能設(shè)置正數(shù)，不能設(shè)置負(fù)數(shù)，
- 所以想要設(shè)置初始化的時(shí)候顯示位置的話就是在這里哈
方法 onDragStop
- onDragStop方法，是控件拖動(dòng)結(jié)束觸發(fā)的事件，具體的參數(shù)寫在圖片上了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細(xì)的示例供大家參考，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
本文主要介紹了react路由知識(shí)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
React路由看似只能由Route組件包裹組件的結(jié)構(gòu)來構(gòu)成,但是其實(shí)也可以通過編寫路由數(shù)組配置然后通過數(shù)組循環(huán)來生成Route組件包裹組件的結(jié)構(gòu),所以本文給大家介紹了React根據(jù)配置生成路由的方法,需要的朋友可以參考下2024-11-11
用React實(shí)現(xiàn)一個(gè)類 chatGPT 的交互式問答組件的方法詳解
這篇文章主要給大家詳細(xì)介紹如何用React實(shí)現(xiàn)一個(gè)類 chatGPT 的交互式問答組件的方法，文中有詳細(xì)的代碼示例，對(duì)我們學(xué)習(xí)有一定的幫助,需要的朋友可以參考下2023-06-06
深入理解React Ref 機(jī)制useRef 與 forwardRef
這篇文章主要介紹了React Ref機(jī)制useRef 與 forwardRef的協(xié)作原理,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2026-03-03
React Native AsyncStorage本地存儲(chǔ)工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲(chǔ)工具類，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
React組件中按鈕的loading狀態(tài)失效問題的解決方案
在React開發(fā)過程中,我遇到這樣的情況：頁面按鈕的loading屬性失效,盡管通過useEffect打印發(fā)現(xiàn)loading狀態(tài)（確實(shí)在true和false之間切換,但按鈕卻沒有表現(xiàn)出預(yù)期的加載效果,所以本文給大家介紹了失效的解決方案,需要的朋友可以參考下2025-07-07
詳解React中父子組件數(shù)據(jù)傳遞和修改的方式及原理
這篇文章主要為大家詳細(xì)介紹了React中父子組件數(shù)據(jù)傳遞和修改的方式及原理,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
React和Vue組件更新的實(shí)現(xiàn)及區(qū)別
React 和 Vue 都是當(dāng)今最流行的前端框架,它們都實(shí)現(xiàn)了組件化開發(fā)模式,本文將從React和Vue的組件更新原理入手,剖析兩者虛擬DOM difer算法的異同點(diǎn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
React?useEffect異步操作常見問題小結(jié)
本文主要介紹了React?useEffect異步操作常見問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06