react中使用Modal模态框

在前端开发中，弹出模态框是经常会碰到的，我们在项目中用到的有两种方式，一种是自己实现，一种是用react-bootstrap中的Modal组件
首先看看我们要实现的功能

image.png

点击弹出示例对话框 的时候，弹出模态框。
我们在react中会把这个弹出的模态框封装成一个组件，这样就可以实现重复应用。
主页代码如下：

import React, {Component } from 'react';
import PropTypes from 'prop-types';
import { Link,Button,ButtonToolbar} from 'react-bootstrap';
import DeleteBusiness from 'component/manage/business/DeleteBusiness';
import Util from 'util';
const propTypes = {
};
class Modal extends Component {
    static propTypes={
    }
    constructor(props) {
        super(props);
        this.state = {
            show:false,
        };
        Util.bindFunction([
            'remove',
            'getModalButtons',
            'removeShow'

        ], this);
    }
    remove(){
        this.setState({
            show:true
        });
    }
    getModalButtons(){
        return [
            确定删除

        ]
    }
    /**
     * 解散分组模态框展示
     */
    removeShow(){
        const {
            show,
        }=this.state;
        if(show){
            return(
                 this.setState({
                                    show: false
                                }) }  >
                    

                        

                            名字
                            

                                
jshd
                            
                        
                        

                            密码确认
                            

                                
                            
                        
                    
                
            )
        }else {
            return null;
        }
    }
    render(){
        return(
            

                

                    

                        
点击按钮感受一下弹出的对话框。

                        this.remove()}   >
                            弹出示例对话框
                        
                    
                
                {this.removeShow()}
            

        )

    }
}
Modal.propTypes = propTypes;
export default Modal;

主页的代码很简单，在state中定义这个模态框展示的show属性，默认是false不展示模态框，点击改变属性值，不作过多的介绍，主要是模态框的实现。

一.自己实现Modal模态框

代码如下：

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';

import { VelocityTransitionGroup } from 'velocity-react';

import Util from 'util';

class DeleteBusiness extends Component {

    static propTypes = {
        title: PropTypes.string,
        buttons: PropTypes.array,

        onClickCloseButton: PropTypes.func
    };

    static defaultProps = {
        buttons: [],
        onClickCloseButton: () => {}
    };

    constructor(props) {
        super(props);

        Util.bindFunction([
            'hideModal'
        ], this);
    }

    hideModal() {

        $(this.popup).find('.fade.in').removeClass('in');
        setTimeout(() => {

            ReactDom.unmountComponentAtNode(this.popup);
            document.body.removeChild(this.popup);
            this.popup = null;
        }, 300);

        $('body').removeClass('modal-open')
    }

    componentWillMount() {
        const body = $('body');

        this.popup = document.createElement("span");
        body.append(this.popup);

        this.renderModal();

        body.addClass('modal-open');
    }

    componentWillUnmount() {
        this.hideModal();
    }

    renderModal() {

        const {
            title,
            buttons,
            children,
            onClickCloseButton
        } = this.props;

        const modal = (
            

                

                

                    

                        

                            

                                
                                
{ title }
                            
                            

                                { children }
                            
                            

                                { buttons.map((btn, index) => React.cloneElement(btn, {
                                    key: ['PageModal', 'button', index].join('-')
                                })) }
                            
                        
                    
                
            
        );

        ReactDom.render(modal, this.popup, () => {
            const ls = $(this.popup).find('.fade').show();
            setTimeout(() => ls.addClass('in'), 10)
        });
    }
    
    render() {

        return null
    }
}

export default DeleteBusiness;

二.使用react-bootstrap中的Modal组件

代码如下：

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';
import {Modal,Button} from 'react-bootstrap';

import Util from 'util';

class DeleteBusiness extends Component {

    static propTypes = {
        title: PropTypes.string,
        buttons: PropTypes.array,

        onClickCloseButton: PropTypes.func,
        removeShowModal:PropTypes.string
    };

    static defaultProps = {
        buttons: [],
        onClickCloseButton: () => {}
    };

    constructor(props) {
        super(props);

        Util.bindFunction([
            'hideModal'
        ], this);
    }

    hideModal() {

        $(this.popup).find('.fade.in').removeClass('in');
        setTimeout(() => {

            ReactDom.unmountComponentAtNode(this.popup);
            document.body.removeChild(this.popup);
            this.popup = null;
        }, 300);

        $('body').removeClass('modal-open')
    }

    componentWillMount() {
        const body = $('body');

        this.popup = document.createElement("span");
        body.append(this.popup);
        body.addClass('modal-open');
    }

    componentWillUnmount() {
        this.hideModal();
    }

    render() {
        const {
            title,
            buttons,
            children,
            onClickCloseButton,
            removeShowModal
        } = this.props;
        return(
            
                
                    {title}
                
                
                    { children }
                
                
                    { buttons.map((btn, index) => React.cloneElement(btn, {
                        key: ['PageModal', 'button', index].join('-')
                    })) }
                
            
        )

    }
}

export default DeleteBusiness;

此时是将父组件是否显示模态框的state传过来的，所以主页代码调用模态框的组件时需要加个prop，

  this.setState({
                                    show: false
                                }) }
                                removeShowModal={this.state.show}>

                    

                        

                            名字
                            

                                
jshd
                            
                        
                        

                            密码确认