使用方法:
npm i react-component-modal -S
import CustomModal from 'react-component-modal';
constructor(props) {
super(props);
this.handleClose = this.handleClose.bind(this);
this.closeModal = this.closeModal.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
visible: false
};
}
render(){
const { visible } = this.state;
return (
<CustomModal visible={visible} title="标题" negative_button_text="取消" positive_button_text="确定" hideModal={this.closeModal} handleSubmit={this.handleSubmit}>
<div>
<p>自定义内容</p>
</div>
</CustomModal>
)
}
showModal() {
this.setState({visible: true});
}
closeModal() {
this.setState({visible: false});
}
handleSubmit() {
this.setState({visible: false});
//
}
部分源码:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'antd-mobile';
class CustomModal extends Component {
constructor(props) {
super(props);
this.hideModal = this.hideModal.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
const { visible, title, negative_button_text, positive_button_text, children } = this.props;
return (
<Modal
visible={visible}
transparent
maskClosable={false}
title={title}
onClose={this.hideModal}
footer={[
{ text: negative_button_text, onPress: this.hideModal},
{ text: positive_button_text, onPress: this.handleSubmit}
]}
wrapProps={{ onTouchStart: this.onWrapTouchStart }}
>
{children}
</Modal>
);
}
hideModal() {//hide modal
const {hideModal} = this.props;
hideModal();
}
handleSubmit() {//submit
const {handleSubmit} = this.props;
handleSubmit();
}
}
CustomModal.propTypes = {//参数类型及是否必传
visible: PropTypes.bool,
title: PropTypes.string,
negative_button_text: PropTypes.string.isRequired,
positive_button_text: PropTypes.string.isRequired,
children: PropTypes.node //自定义内容
};
CustomModal.defaultProps = {//默认参数
visible: false,
title: '标题',
negative_button_text: '取消',
positive_button_text: '确定'
};
export default CustomModal;
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿。