react封装一个可自定义内容的modal弹框组件

最新推荐文章于 2024-07-19 19:53:02 发布

weixin_34318956

最新推荐文章于 2024-07-19 19:53:02 发布

阅读量998

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c272d696fb9a049b41c8bfe

版权

使用方法：

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 (
            <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;
复制代码