React?Hook實(shí)現(xiàn)對(duì)話框組件
React Hook實(shí)現(xiàn)對(duì)話框組件,供大家參考,具體內(nèi)容如下
準(zhǔn)備
- 思路:對(duì)話框組件是有需要的時(shí)候希望它能夠彈出來(lái),不需要的時(shí)候在頁(yè)面上是沒有任何顯示的,這就意味著需要一個(gè)狀態(tài),在父組件點(diǎn)擊按鈕或其他的時(shí)候能夠更改+ 它并顯示,同時(shí)子組件(對(duì)話框組件)點(diǎn)擊關(guān)閉的時(shí)候也需要更改這個(gè)狀態(tài)。
進(jìn)階:為對(duì)話框組件背景添加蒙皮,當(dāng)對(duì)話框內(nèi)容需要滾動(dòng)時(shí)限制瀏覽器頁(yè)面的滾動(dòng)。
- React Hook 主要用到了 useState,useContext,useContext 主要用于將父組件的 setStatus 傳遞給子組件以至于它可以更新狀態(tài)。
附上 Dialog 和 DialogMain組件代碼,其中DialogMain 為父組件,使用時(shí)只需將其掛載至 App.js。
代碼
DialogMain 父組件代碼
import React from "react"; import Dialog from "./dialog"; //初始化 Context export const StatusContext = React.createContext(); const DialogTest = () => { ? ? //設(shè)置狀態(tài)控制對(duì)話框的打開與關(guān)閉 ? ? const [status, setStatus] = React.useState(false); ? ? //條件渲染,符合條件返回 Dialog 組件否則返回 null ? ? function GetDialog() { ? ? ? ? if (status) return <Dialog />; ? ? ? ? else return null; ? ? } ? ? //打開函數(shù) ? ? function openDialog() { ? ? ? ? //打開時(shí)禁止瀏覽器外面的滾動(dòng),注釋掉這行鼠標(biāo)在對(duì)話框外面時(shí)可以滾動(dòng)瀏覽器界面 ? ? ? ? document.body.style.overflow = "hidden"; ? ? ? ? setStatus(true); ? ? } ? ? return ( ? ? ? ? <div> ? ? ? ? ? ? {/* 按鈕綁定打開函數(shù) */} ? ? ? ? ? ? <button onClick={openDialog}>打開對(duì)話框</button> ? ? ? ? ? ? {/* 使用 Context 的 Provider 暴露 setStatus 方法 */} ? ? ? ? ? ? <StatusContext.Provider value={{ setStatus }}> ? ? ? ? ? ? ? ? <GetDialog /> ? ? ? ? ? ? </StatusContext.Provider> ? ? ? ? </div> ? ? ); }; export default DialogTest;
Dialog子組件代碼
import React from "react"; import { StatusContext } from "./dialogMain"; const Dialog = (props) => { ? ? //利用解構(gòu)賦值將 setState 從 useContext分離出來(lái) ? ? const { setStatus } = React.useContext(StatusContext); ? ? //關(guān)閉時(shí)更改 Status 狀態(tài)為 false ? ? function uninstallDialog() { ? ? ? ? setStatus(false); ? ? ? ? //關(guān)閉時(shí)重新將瀏覽器界面設(shè)置為滾動(dòng)或其他 ? ? ? ? document.body.style.overflow = "scroll"; ? ? } ? ? // 點(diǎn)擊蒙層本身時(shí)關(guān)閉對(duì)話框,點(diǎn)擊對(duì)話框的內(nèi)容時(shí)不關(guān)閉 ? ? function handleClick(event) { ? ? ? ? if (event.target === event.currentTarget) { ? ? ? ? ? ? //調(diào)用關(guān)閉的方法 ? ? ? ? ? ? uninstallDialog(); ? ? ? ? } ? ? } ? ? return ( ? ? ? ? // 為整個(gè)組件添加css 樣式并讓其置于頂層,同時(shí)對(duì)話框意外的地方添加模糊效果 ? ? ? ? <div ? ? ? ? ? ? style={{ ? ? ? ? ? ? ? ? position: " fixed", ? ? ? ? ? ? ? ? top: 0, ? ? ? ? ? ? ? ? left: 0, ? ? ? ? ? ? ? ? right: 0, ? ? ? ? ? ? ? ? bottom: 0, ? ? ? ? ? ? ? ? background: "rgba(0, 0, 0, 0.3)", ? ? ? ? ? ? ? ? zIndex: " 99", ? ? ? ? ? ? }} ? ? ? ? ? ? onClick={handleClick} ? ? ? ? > ? ? ? ? ? ? {/* 為對(duì)話框添加 css 樣式,absolute定位時(shí)相對(duì)于容器的位置 ,同時(shí)將 overflow 設(shè)置為自動(dòng)*/} ? ? ? ? ? ? <div ? ? ? ? ? ? ? ? style={{ ? ? ? ? ? ? ? ? ? ? position: "absolute", ? ? ? ? ? ? ? ? ? ? left: "50%", ? ? ? ? ? ? ? ? ? ? top: "50%", ? ? ? ? ? ? ? ? ? ? overflow: "auto", ? ? ? ? ? ? ? ? ? ? transform: "translate(-50%, -50%)", ? ? ? ? ? ? ? ? ? ? padding: "30px 30px", ? ? ? ? ? ? ? ? ? ? width: " 200px", ? ? ? ? ? ? ? ? ? ? height: " 200px", ? ? ? ? ? ? ? ? ? ? border: "2px solid yellow", ? ? ? ? ? ? ? ? ? ? borderRadius: "8px", ? ? ? ? ? ? ? ? ? ? background: "yellow", ? ? ? ? ? ? ? ? }} ? ? ? ? ? ? > ? ? ? ? ? ? ? ? {/* 為關(guān)閉按鈕綁定關(guān)閉方法 */} ? ? ? ? ? ? ? ? <button onClick={uninstallDialog}>關(guān)閉</button> ? ? ? ? ? ? ? ? 對(duì)話框?qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒? ? ? ? ? ? ? ? ? 對(duì)話框?qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒驅(qū)υ捒? ? ? ? ? ? ? ? ? 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 對(duì)話框 ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ); }; export default Dialog;
App.js代碼
import "./App.css"; import DialogMain from "./component/dialogTest/dialogMain"; function App() { ? ? return ( ? ? ? ? <div className="App"> ? ? ? ? ? ? <div style={{ height: "2000px" }}> ? ? ? ? ? ? ? ? <DialogMain /> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ); } export default App;
運(yùn)行界面
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念,flexbox是屬于web前端領(lǐng)域CSS的一種布局方案,下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07react?echarts?tree樹圖搜索展開功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React18之update流程從零實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了React18之update流程從零實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01React Native實(shí)現(xiàn)地址挑選器功能
這篇文章主要為大家詳細(xì)介紹了React Native仿地址挑選器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10reset.css瀏覽器默認(rèn)樣式表重置(user?agent?stylesheet)的示例代碼
這篇文章主要介紹了reset.css瀏覽器默認(rèn)樣式表重置(user?agent?stylesheet),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12React利用路由實(shí)現(xiàn)登錄界面的跳轉(zhuǎn)
這篇文章主要介紹了React利用路由實(shí)現(xiàn)登錄界面的跳轉(zhuǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09