自己使用react写一个弹框组件（2）

之前上一篇文章讲了一些动画的实现，现在正式总结使用react搭一个modal的过程,在这个理我使用create-react-app来创建react app。

import React from 'react';
import PropTypes from 'prop-types'
import './SevenModal.css'
class SevenModal extends React.Component {

  render() {
    return (
        <div className="sevenmodal-wrapper">
          {
              <div className="sevenmodal">
                <div className="sevenmodal-title">这是modal标题</div>
                <div className="sevenmodal-content">这是modal内容</div>
                <div className="sevenmodal-operator">
                  <button className="sevenmodal-operator-close">取消</button>
                  <button className="sevenmodal-operator-confirm">确认</button>
                </div>
              </div>
              <div className="sevenmodal-mask"></div> 
          }
        </div> 
    )
  }
}
SevenModal.defaultProps = {}
SevenModal.propTypes = {}
  
export default SevenModal

这是写一个react'组件的基础模式，需要的文件有SevenModal.css， 这是放css样式的地方。

加上回调事件以及相关属性

要使弹框组件能够正常关闭，需要一个能控制它显示和关闭的属性，visable，以及两个回调事件，即点击确认和点击取消的两个回调事件。

state = { visible: false, }

/*

  ........

*/
SevenModal.defaultProps = {}
SevenModal.propTypes = {
  visible: PropTypes.bool,
  onConfirm: PropTypes.func,
  onClose: PropTypes.func
}
  

回调事件是react父子组件间通讯方式之一，子组件调用从父组件传下来的回调函数（通常作为props传给子组件），父组件的相关函数就执行了，如果把参数传入回调函数内，父组件的相应函数也能接收到

closeModal = () => {
    const { onClose } = this.props
    onClose && onClose()
    this.setState({
      visable: false,
    })
}

confirmModal = () => {
    const { onConfirm } = this.props
    onConfirm && onConfirm()
    this.setState({
        visable: false,
    })
}

将这两个写好的函数绑定在确认和取消的onClick事件里边。visable作为控制弹框显示关闭的一个状态。

render() {
       <div className="sevenmodal-wrapper">
          {
            visible &&
            <div>
              <div className={`sevenmodal ${classes}`}>
                <div className="sevenmodal-title">这是modal标题</div>
                <div className="sevenmodal-content">这是modal内容</div>
                <div className="sevenmodal-operator">
                  <button className="sevenmodal-operator-close" onClick={this.closeModal}>取消</button>
                  <button className="sevenmodal-operator-confirm" onClick={this.confirmModal}>确认</button>
                </div>

              </div>
              <div className={`sevenmodal-mask ${maskClasses}`} onClick={this.maskClick}></div> 
            </div>
          }
        </div> 
}

样式

样式是由两部分组成，一部分是modal组件主体的内容，即modal的标题和内容，以及确认和取消按钮。还有一部分是蒙层。两部分都采用fixed作为position，因为这两部分都是针对于body布局，而fixed正式一种基于body移动的absolute。同时设定两个z-index都在9000以上，这样保证了两个div都是在最上面显示。但是modal主体的div的zindex只要比蒙层的div多个一点点就可以了。

.sevenmodal {
  position: fixed;
  width: 300px;
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  z-index: 9999;
  box-shadow: inset 0 0 1px 0 #000;
}
.sevenmodal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .6;
  z-index: 9998;
}