reactjs - 为什么点击图标后我的自定义模态框打不开？

问题描述

我正在尝试在反应中创建自定义模态。遵循了我发现的大多数教程，但我的 Modal 从未出现过。另一方面，react-modal 确实有效，但我在设计它时遇到了麻烦。尽管如此，我的自定义模态应该可以工作，尽管当我单击图标时它并没有给出任何生命的歌声。

我的标题：

function Header () {
    const [isOpen, setIsOpen] = useState(false)
    
    return(
        <>
            <header className="header">
            <div className="wrap">
                <span className="btn-icon">
                    <IconPlus onClick={() => setIsOpen(true)} className="icon icon-plus js-modal-init"/>             
                </span> 
            </div>
            <div className="header-inner">
                <div className="wrap">
                    <img className="logo" src="images/pic.svg" alt="Pic"/>
                    <div className="date-wrap">
                        <IconCalendar className="icon icon-plus js-modal-init"/>
                        <time>02 / 08 / 2019</time>
                    </div>
                </div>
            </div>
            </header>
            <ModalWindow open={isOpen} onClose={() => setIsOpen(false)} />
           
        </>
        )  
}

模态窗口：

export const ModalWindow = ({open, onClose}) => {
    if(!open) return null

    return(
        <div className="modal-wrap js-modal">
            <div className="modal js-modal-inner">
                <h2>Create a task:</h2>
                <form action="">
                    <div className="field-wrap">
                        <label className="label" for="">Title:</label>
                        <input className="field" type="text" id="" placeholder="Enter title here..."/>
                    </div>
                    <div className="field-wrap">
                        <label className="label" for="">Hours:</label>
                        <input className="field" type="text" id="" placeholder="Add hours here..."/>
                    </div>
                    <div className="btn-wrap align-right">
                        <input onClick={onClose} className="btn" type="submit" value="Create"/>
                    </div>
                </form>
            </div>
        </div>
        
    )
}

CSS：

.modal-wrap {
    display: flex;
    visibility: visible;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: 350ms ease-in-out;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal {
    position: relative;
    width: 100%;
    max-width: 700px;
    padding: 50px 40px;
    background-color: #fff;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 1em;
    color: #666;
    font-size: 30px;
    font-weight: 300;
}

.modal-wrap.is-visible {
    visibility: visible;
    opacity: 1;
}

标签： reactjsreact-modal

reactjs - 为什么点击图标后我的自定义模态框打不开？

问题描述

解决方案

推荐阅读