React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Hook对话框组件

React Hook实现对话框组件

作者:weixin_45703889

这篇文章主要为大家详细介绍了React Hook实现对话框组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

React Hook实现对话框组件,供大家参考,具体内容如下

准备

      进阶:为对话框组件背景添加蒙皮,当对话框内容需要滚动时限制浏览器页面的滚动。

附上 Dialog 和 DialogMain组件代码,其中DialogMain 为父组件,使用时只需将其挂载至 App.js。

代码

DialogMain 父组件代码

import React from "react";
import Dialog from "./dialog";
//初始化 Context
export const StatusContext = React.createContext();
const DialogTest = () => {
    //设置状态控制对话框的打开与关闭
    const [status, setStatus] = React.useState(false);
    //条件渲染,符合条件返回 Dialog 组件否则返回 null
    function GetDialog() {
        if (status) return <Dialog />;
        else return null;
    }
    //打开函数
    function openDialog() {
        //打开时禁止浏览器外面的滚动,注释掉这行鼠标在对话框外面时可以滚动浏览器界面
        document.body.style.overflow = "hidden";
        setStatus(true);
    }
    return (
        <div>
            {/* 按钮绑定打开函数 */}
            <button onClick={openDialog}>打开对话框</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) => {
    //利用解构赋值将 setState 从 useContext分离出来
    const { setStatus } = React.useContext(StatusContext);
    //关闭时更改 Status 状态为 false
    function uninstallDialog() {
        setStatus(false);
        //关闭时重新将浏览器界面设置为滚动或其他
        document.body.style.overflow = "scroll";
    }
    // 点击蒙层本身时关闭对话框,点击对话框的内容时不关闭
    function handleClick(event) {
        if (event.target === event.currentTarget) {
            //调用关闭的方法
            uninstallDialog();
        }
    }
    return (
        // 为整个组件添加css 样式并让其置于顶层,同时对话框意外的地方添加模糊效果
        <div
            style={{
                position: " fixed",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                background: "rgba(0, 0, 0, 0.3)",
                zIndex: " 99",
            }}
            onClick={handleClick}
        >
            {/* 为对话框添加 css 样式,absolute定位时相对于容器的位置 ,同时将 overflow 设置为自动*/}
            <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",
                }}
            >
                {/* 为关闭按钮绑定关闭方法 */}
                <button onClick={uninstallDialog}>关闭</button>
                对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框
                对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框
                对话框 对话框 对话框 对话框 对话框 对话框 对话框 对话框 对话框
            </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;

运行界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文