react-bootstrap的模态框Modal设置show的回调函数

最新推荐文章于 2024-10-10 07:41:26 发布

qq_39525174

最新推荐文章于 2024-10-10 07:41:26 发布

阅读量2.3k

点赞数

分类专栏： react 文章标签： react es6 bootstrap 前端

本文链接：https://blog.csdn.net/qq_39525174/article/details/105427998

版权

本文介绍了react-bootstrap中Modal的六种事件回调函数，包括onEnter、onEntering、onEntered、onExit、onExiting和onExited，并通过项目实战展示了在不同阶段的调用顺序。在实际应用中，详细解释了当Modal显示和隐藏时，这些回调如何按顺序触发。

摘要由CSDN通过智能技术生成

react-bootstrap的模态框Modal事件回调函数

介绍

react-bootstrap中的模态框Modal的六大事件:

onEnter：Modal的show属性设置为true后调用,Modal开始进入
onEntering：Modal正在进入，此时屏幕上还不能看到Modal
onEntered:Modal显示完成，此时屏幕上可以看到Modal了
onExit：Modal的show属性设置为false后调用，Modal开始退出
onExiting:Modal正在退出
onExited:Modal已经退出，此时屏幕上看不到Modal了

项目实战

Modal类

/**
 Create Date:2020.4.10
 @author：lyz
 email:2210776504@qq.com
 Description:这个项目是用作解释Modal的六大事件回调函数的，MyModal 类是实现Modal的类，而AddObject 类则是使用这个Modal类的类。AddObject 类的用途是增加物体（我在这里的用途是增加物体而已，你根据你的实际用途实现不同的类就行啦）
 
import React from 'react';
import {
    Modal, Button, Form, InputGroup, Row, Col } from 'react-bootstrap';

class MyModal extends React.Component{
   
    constructor(props){
   
        super(props);

        //将下面这些函数的上下文设置为MyModal的上下文，不然的话在下面这些函数里使用的this将不是MyModal的this
        this.onModalEnter = this.onModalEnter.bind(this);
        this.onModalEntering = this.onModalEntering.bind(this);
        this.onModalEntered = this.onModalEntered.bind(this);
        this.onModalExit = this.onModalExit.bind(this);
        this.onModalExiting = this.onModalExiting.bind(this);
        this.onModalExited = this.onModalExited.bind(this)