在前端開發(fā)中，彈出模態(tài)框是經(jīng)常會碰到的戴质，我們在項目中用到的有兩種方式虑稼，一種是自己實現(xiàn)魂奥，一種是用react-bootstrap中的Modal組件
首先看看我們要實現(xiàn)的功能
image.png
點擊彈出示例對話框 的時候讨跟，彈出模態(tài)框纪他。
我們在react中會把這個彈出的模態(tài)框封裝成一個組件，這樣就可以實現(xiàn)重復(fù)應(yīng)用晾匠。
主頁代碼如下：
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 [
<a href="javascript:;"
className="btn btn-sm btn-danger">確定刪除</a>
]
}
/**
* 解散分組模態(tài)框展示
*/
removeShow(){
const {
show,
}=this.state;
if(show){
return(
<DeleteBusiness title={ "解散分組" }
buttons={ this.getModalButtons() }
onClickCloseButton={ () => this.setState({
show: false
}) } >
<form className="form-horizontal">
<div className="form-group">
<label className="col-md-3 text-right m-0">名字</label>
<div className="col-md-8">
<p className="text_gray m-0">jshd</p>
</div>
</div>
<div className="form-group">
<label className="col-md-3 control-label">密碼確認(rèn)</label>
<div className="col-md-8">
<input type="password" className="form-control" placeholder="請輸入您的登錄密碼" ref="passwordInput"/>
</div>
</div>
</form>
</DeleteBusiness>
)
}else {
return null;
}
}
render(){
return(
<div id="page-container" className="page-container page-sidebar-fixed page-header-fixed">
<div id="content" className="content">
<div>
<p>點擊按鈕感受一下彈出的對話框茶袒。</p>
<Button
bsStyle="primary"
bsSize="large"
onClick={()=>this.remove()} >
彈出示例對話框
</Button>
</div>
</div>
{this.removeShow()}
</div>
)
}
}
Modal.propTypes = propTypes;
export default Modal;
主頁的代碼很簡單，在state中定義這個模態(tài)框展示的show屬性凉馆，默認(rèn)是false不展示模態(tài)框薪寓，點擊改變屬性值亡资，不作過多的介紹，主要是模態(tài)框的實現(xiàn)向叉。
一.自己實現(xiàn)Modal模態(tài)框
代碼如下：
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 = (
<div>
<div className="modal-backdrop fade"></div>
<div className="modal fade">
<div className="modal-dialog ">
<div className="modal-content">
<div className="modal-header">
<a href="javascript:;"
onClick={ onClickCloseButton }
className="close btn btn-xs btn-icon btn-circle btn-danger m-0"><i className="fa fa-times"></i></a>
<h4 className="modal-title">{ title }</h4>
</div>
<div className="modal-body">
{ children }
</div>
<div className="modal-footer">
{ buttons.map((btn, index) => React.cloneElement(btn, {
key: ['PageModal', 'button', index].join('-')
})) }
</div>
</div>
</div>
</div>
</div>
);
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(
<Modal show={removeShowModal} onHide={this.props.onClickCloseButton}>
<Modal.Header closeButton>
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{ children }
</Modal.Body>
<Modal.Footer>
{ buttons.map((btn, index) => React.cloneElement(btn, {
key: ['PageModal', 'button', index].join('-')
})) }
</Modal.Footer>
</Modal>
)
}
}
export default DeleteBusiness;
此時是將父組件是否顯示模態(tài)框的state傳過來的锥腻，所以主頁代碼調(diào)用模態(tài)框的組件時需要加個prop，
<DeleteBusiness title={ "解散分組" }
buttons={ this.getModalButtons() }
onClickCloseButton={ () => this.setState({
show: false
}) }
removeShowModal={this.state.show}>
<form className="form-horizontal">
<div className="form-group">
<label className="col-md-3 text-right m-0">名字</label>
<div className="col-md-8">
<p className="text_gray m-0">jshd</p>
</div>
</div>
<div className="form-group">
<label className="col-md-3 control-label">密碼確認(rèn)</label>
<div className="col-md-8">
<input type="password" className="form-control" placeholder="請輸入您的登錄密碼" ref="passwordInput"/>
</div>
</div>
</form>
</DeleteBusiness>
