react封裝一個可自定義內容的modal彈框組件

使用方法：

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;

---

組件地址github

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。

前端最火框架排行榜——小程序二維碼