每日质量NPM包模态框_react-modal

一、react-modal

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

理解: 一个容易使用的React模态框组件

二、用法

有时候我们不用一些UI框架的时候(bs3.0、antd),就需要自己封装一些模态框.自己定义各种回调事件...等等

这时候可以考虑用一个npm模态框的包

安装

``` $ npm install react-modal

import ReactModal from 'react-modal'

<h4>事件</h4>
<b>isOpen</b>: 模态框状态控制  

<b>onAfterOpen</b>: 模态框打开后的回调事件  

<b>onRequestClose</b>: 模态框关闭后的回调事件

<b>style</b>: 模态框样式,默认以`content`为默认应用名

<b>contentLabel</b>: 内容label

<h3>和React结合</h3>

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>
    )
}

}

![](https://img2018.cnblogs.com/blog/1414709/201810/1414709-20181003132007954-341535996.png)

<h4>更多DEMO</h4>
<a href="https://codepen.io/claydiffrient/pen/KNxgav" target="_blank">《基础Modal》</a>  
<a href="https://codepen.io/claydiffrient/pen/KNjVBx?editors=1111" target="_blank">《结合onRequestClose》</a>  
<a href="https://codepen.io/claydiffrient/pen/KNjVrG" target="_blank">《使用样式的Modal》</a>  
<a href="https://codepen.io/claydiffrient/pen/woLzwo" target="_blank">《shouldCloseOnOverlayClick》</a>