React?Hook實(shí)現(xiàn)對(duì)話框組件

更新時(shí)間：2022年08月23日 14:59:16 作者：weixin_45703889

這篇文章主要為大家詳細(xì)介紹了React?Hook實(shí)現(xiàn)對(duì)話框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

React Hook實(shí)現(xiàn)對(duì)話框組件，供大家參考，具體內(nèi)容如下

準(zhǔn)備

思路：對(duì)話框組件是有需要的時(shí)候希望它能夠彈出來，不需要的時(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分離出來
? ? 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)行界面