React封装了一个可定制内容的模态弹框组件
时间：2023-04-05 10:57:21
HTML5
使用方法：npmireact-component-modal-SimportCustomModalfrom'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;返回(p>
)}showModal(){this.setState({visible:true});}closeModal(){this.setState({visible:false});}handleSubmit(){这个。setState({visible:false});//}组件地址github部分代码:importReact,{Component}from'react';importPropTypesfrom'prop-types';import{Modal}from'antd-mobile';classCustomModalextendsComponent{构造函数（道具）{超级（道具）；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;返回（this.handleSubmit}]}wrapProps={{onTouchStart:this.onWrapTouchStart}}>{children});}hideModal(){//隐藏模态const{hideModal}=this.props;隐藏模式（）；}handleSubmit(){//提交const{handleSubmit}=this.props;处理提交（）；}}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:'Title',negative_button_text:'Cancel',positive_button_text:'OK'};导出默认CustomModal；组件地址github更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈潮汐。最流行的前端框架排行榜——小程序二维码
