簡単な反応モードの構築

私は、常に私がプロジェクトでモーダルを使いたいときはいつも、反応モーダルパッケージを使用しました、しかし、途中で、私はゼロから私のものを造って欲しかったです、そして、私はなぜ私がNPMパッケージに行かせたかについて疑問に思いました.これは短い記事であり、非常に適切なので、来る.
まず、2つのコンポーネントを作成できますより良い理解のための家庭とモーダル構成要素ホームコンポーネントでは、ボタンと機能を持つシンプルなh 1タグを持つことができます

import React, { Component } from 'react';
import './Home.css';
import Modal from './Modal';

class Home extends Component {
    state = {
        open: true
    };

    openModal = (e) => {
        e.preventDefault();
        this.setState({
            open: !this.state.open
        });
    };

    render() {
        return (
            <main>
                <section>
                    <h1>React-Modal</h1>
                    <button
                        onClick={(e) => {
                            this.openModal(e);
                        }}>
                        Open Modal
                    </button>
                </section>

                <Modal open={this.state.open} onClose={this.openModal} />
            </main>
        );
    }
}

export default Home;

また、モーダルコンポーネントでは、同じタグと関数を追加できます.

import React, { Component } from 'react';
import './Modal.css';

class Modal extends Component {
    onClose = (e) => {
        this.props.onClose && this.props.onClose(e);
    };

    render() {
        if (this.props.open) {
            return null;
        }

        return (
            <section className="modal-container" id="modal">
                <div className="modal-content">
                    <h1>Notify Me</h1>
                    <button onClick={this.onClose}>Close Modal</button>
                </div>
            </section>
        );
    }
}

export default Modal;

ちょっと説明しましょう.我々は、trueにボタンをクリックして我々の初期状態を設定している、我々の状態がfalseに更新されます.次に、作成したモーダルコンポーネントをインポートし、openとoncloseのプロップを渡します.
モーダルコンポーネントでは、渡されたプロップを取得し、状態がtrueの場合、NULLを返します.OnClose関数は、閉じたモーダルボタンをクリックしたときにtrueからfalseに状態を変更します.
さて、このコードを実行すると、生の構造が表示されますが、モードはまだ動作していませんので、CSSに目を向けて魔法をデザインしましょう.

/* -------------Home.css--------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    text-align: center;
    padding-top: 20px;
}

/* -------------Modal.css--------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.modal-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 50px auto;
    width: 467px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    padding: 40px 60px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
}

そして、それはすべてです.モーダルコンテナーは、ホームページコンテンツを表示するために、背景のオーバーレイとして使用されます.あなたは、あなたのモードをスタイルすることができますし、さらに上部、左、下から、表示するようにアニメーションを希望するようにフェードイン.アニメーションを少しスライドさせてラップを呼ぶ

/* -------------Modal.css--------------------- */
.modal-content {
    background-color: #f4f4f4;
    margin: 50px auto;
    width: 467px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    padding: 40px 60px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
        animation: dropdwn ease-in-out 700ms;
}

@keyframes dropdwn {
    0% {
        opacity: 0;
        margin-top: -250px;
    }
    25% {
        opacity: 0.25;
        margin-top: -200px;
    }
    50% {
        opacity: 0.5;
        margin-top: -100px;
    }
    75% {
        opacity: 0.75;
        margin-top: -50px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

そして、それはすべてです.チャオ