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

全棧弄潮兒發表於2019-02-16
React封裝元件

使用方法：

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/5、ionic1/2/3、react、vue、微信小程式、nodejs等技術文章、視訊教程和開源專案，請關注微信公眾號——全棧弄潮兒。

微信公眾號.png

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

前端排行榜.png

相關文章