一、react-modal

官方定義: Accessible modal dialog component for React.JS

理解: 一個容易使用的React模態框元件

二、用法

有時候我們不用一些UI框架的時候(bs3.0、antd),就需要自己封裝一些模態框.自己定義各種回撥事件...等等

這時候可以考慮用一個npm模態框的包

安裝

$ npm install react-modal

import ReactModal from 'react-modal'

事件

isOpen: 模態框狀態控制

onAfterOpen: 模態框開啟後的回撥事件

onRequestClose: 模態框關閉後的回撥事件

style: 模態框樣式,預設以content為預設應用名

contentLabel: 內容label

和React結合

import React,{ PureComponent } from 'react'
import ReactModal from 'react-modal'

const customStyles = {
    content: {
      width: '300px',
      height: '300px',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -55%)'
    },
    btn: {
      marginTop: 30,
      background: 'transparent',  
      padding: '10px 15px'
    }
};

  ReactModal.setAppElement('#root')

  export default class ReactModalComp extends PureComponent{
    constructor(arg){
        super(arg)

        this.state = {
            modalOpenState: false,
        }

        this.openModal = this.openModal.bind(this)
        this.closeModal = this.closeModal.bind(this)
    }

    openModal(){
        this.setState({
            modalOpenState: true,
        })
    }

    closeModal(){
        this.setState({
            modalOpenState: false,
        })
    }

    afterOpenModalEv(){
        console.log('==========> 開啟')
    }

    render(){
        const { modalOpenState } = this.state;
        return(
            <div className="reactModal">
                <button onClick={this.openModal} style={customStyles.btn}>開啟</button>
                <ReactModal
                    isOpen = {modalOpenState}
                    style={customStyles}
                    contentLabel="Example Modal"
                    onAfterOpen={this.afterOpenModalEv}
                >
                    <form>
                        <input />
                        <p>tab navigation</p>
                        <p>stays</p>
                        <p>inside</p>
                        <p>the modal</p>
                    </form>
                    <button onClick={this.closeModal}>關閉</button>
                </ReactModal>
            </div>
        )
    }
} 
 

更多DEMO