React封装一个组件弹出框

前言

代码

简要

引用

效果

前言

我是歌谣放弃很容易但是坚持一定很酷为了保证react代码的一个简洁性最近开始封装组件,

直接上代码因为都很简单的模式这边直接进行讲解

代码

//取消机构和取消讲师的方法封装
//params visible控制弹框的一个现实和隐藏
import React from 'react';
import {Modal,Icon,Button } from 'antd';class CancelModel extends React.Component {stata = {}//控制确定调用的函数handleOk=() => {this.props.handleOk&&this.props.handleOk();}//控制弹窗的一个关闭handleCancel=() => {this.props.handleCancel&&this.props.handleCancel();}//控制页面跳转的参数handleSkip=() => {// this.props.handleSkip&&this.props.handleSkip();} render() {const {cancleVisible}=this.propsreturn (<div><Modaltitle="提示"visible={cancleVisible}onOk={this.handleOk}onCancel={this.handleCancel}style={{textAlign:'center'}}><Icon type="exclamation-circle" /><p>该讲师关联相关课程,不可取消该讲师</p>{/* <Button type="link" block onClick={this.handleSkip}>点击跳转</Button> */}</Modal></div>)}
}export default CancelModel

简要

1this.props.handleCancel&&this.props.handleCancel();判断方法名是否存在

2 const {cancleVisible}=this.props父组件绑定值进行弹出框的显示和隐藏

3 this.props.handleCancel&&this.props.handleCancel();想父组件传入方法

引用

import CancelModel from './ComponentsList/cancleModel'

 <CancelModel  handleOk={this.handleLectureOk}cancleVisible={cancleVisible} handleCancel={this.handleLectureCancle} />

效果

React封装一个组件弹出框相关推荐

html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
qt自定义按钮类，每个按钮自带一个右键弹出框，如何使同一时刻只显示一个弹出框
提要继承于QPushButton的自定义按钮类,其右键弹出一个弹框,创建多个这样的自定义按钮在窗口中,每一时刻只显示一个右键弹出框,避免同一时刻,多个按钮右键弹出弹出框后,未及时关闭弹出框导致的同一 ...
vue组件弹出框点击显示隐藏
1. vue组件弹出框点击显示隐藏转载于:https://www.cnblogs.com/knuzy/p/9525852.html
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
vue 组件弹出框点击显示隐藏
本案实现的效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...
html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <button id="box" onclick="pop_box()">弹出框< ...
react封装子组件弹框
import Protocol from './protocol';{/* 协议弹框 */}<Protocolvisible={visible}register={ async (tick) = ...
一个 bootstrap 弹出框插件
http://bootstrap.ourjs.com/ 转载于:https://www.cnblogs.com/MDK-L/p/4428247.html
html alter自动弹出,javascript封装alert()弹出框
由于各个浏览器之间的差异,弹出框不一样,这有影响页面的布局,所以自己就用原声js封装了一个alert弹出框,希望对有需求的有所帮助... ` alert function ok() { alert(' ...

React封装一个组件弹出框

前言

代码

简要

引用

效果

React封装一个组件弹出框相关推荐

最新文章

热门文章