使用方法：
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});//}复制代码
组件地址github
部分源码:
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 (<Modalvisible={visible}transparentmaskClosable={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 modalconst {hideModal} = this.props;hideModal();}handleSubmit() {//submitconst {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;复制代码
组件地址github
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
