首页 > 其他 > 详细

React练习 10:弹出层效果

时间:2019-11-10 14:47:32      阅读:113      评论:0      收藏:0      [点我收藏+]

需求:点击按钮后弹出一个遮罩。点击 X 后关闭。

 

import React,{useState,useEffect} from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;


function Overlay(){
    const [isShow,setShow]=useState(false);
    return(
        <>
        <div id="overlay" className={isShow ? ‘show‘ : ‘‘} ></div>
        <div id="win" className={isShow ? ‘show‘ : ‘‘} >
            <h2>
                <span onClick={()=>setShow(false)} id="close">x</span>
            </h2>
        </div>
        <button onClick={()=>setShow(true)}>弹出层</button>
        </>
    );
}
ReactDOM.render(
    <Overlay/>,
    document.getElementById(‘root‘)
);

 

React练习 10:弹出层效果

原文:https://www.cnblogs.com/sx00xs/p/11830085.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!