码迷,mamicode.com
首页 > 其他好文 > 详细

React练习 10:弹出层效果

时间:2019-11-10 15:51:14      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:use   false   root   span   style   effect   button   import   ntb   

需求:点击按钮后弹出一个遮罩。点击 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:弹出层效果

标签:use   false   root   span   style   effect   button   import   ntb   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!