之前上一篇文章讲了一些动画的实现，现在正式总结使用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;
}
