阅读 2024

详细介绍React模态框组件react-modal

1,介绍

  • 该组件实现了模态框的一些效果。
  • 这是react-modal官网的配置参数。

模态框的手动实现,并不算太难,这个组件用着还不错。

2,配置参数介绍

import React, { Component } from 'react';
import Modal from 'react-modal'
import './App.css';

class App extends Component {
  constructor () {
    super();
    this.state = {
      showModal: false  // 用于设置模态框的显示隐藏
    };
  }

  openModal = () => {
    this.setState({ showModal: true });
  }

  closeModal = () => {
    this.setState({ showModal: false });
  }

  // 模态框打开后,执行的函数
  handleAfterOpenFunc = () => {
    console.log('open~')
  }

  // 该函数,下面会有介绍
  handleAfterCloseFunc = () => {
    console.log('close~')
  }

  // 用于测试获取的DOM节点
  openRef = () => {
    console.log(this.overlayRef)
    console.log(this.contentRef)
  }

  // 指定模态框的父级
  getParent = () => {
    return document.querySelector('#App');
  }

  /*
  * react-modal最终生成的DOM默认是作为body的子元素。
  *   以此例来说,最终位置
  *   <div className="App">
        <div onClick={this.toggle}>点我</div>
      </div>

      Modal单独生成的DOM(位置可变,下面有说)
      <div portal>
        ...
      </div>
  *
  * Modal单独生成的DOM,4层div
  * |div Portal 没有默认样式
  *
  *   |div  overlay 有默认的内联样式
  *       position: fixed;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          background-color: rgba(255, 255, 255, 0.75);
  *
  *       |div content 有默认的内联样式
  *           绝对定位等一大推
  *
  *           |div 指<Modal></Model>标签中包含的自定义元素
  * */
  render() {
    return (
      <div id="App">
        <button onClick={this.openModal}>打开模态框</button>
        <button onClick={this.openRef}>测试获取DOM节点</button>
        <Modal
          isOpen={this.state.showModal}   // modal容器是否显示
          overlayClassName="overlay"   // 指定div overlay的classname。(可覆盖默认样式)
          className="content"   // 指定div content的classname。(可覆盖默认样式)
          style={{ overlay: {}, content: {} }}  // div overlay和content的样式,也可以直接在这里指定。
          onAfterOpen={this.handleAfterOpenFunc}  // 在模态框打开后,执行的函数

          // 当请求关闭模态框时,执行的函数!
          // (模态框不一定会关闭,因为是否关闭取决于isOpen特性,如果在当前函数中,改变了isOpen:false,才会关闭)
          //   只有两种情况,才会执行目标函数。
          //   1,当shouldCloseOnOverlayClick为true时,在div overlay上点击,会触发
          //   2,当shouldCloseOnEsc为true时,并且选中了div content
          //        也就是说,如果shouldFocusAfterRender也为true,按esc键就会触发。
          //        或者,shouldFocusAfterRender为false时,手动选中div content,按esc键就会触发。
          onRequestClose={this.handleAfterCloseFunc}
          closeTimeoutMS={1000} // 指定,在发出关闭命令后,模态框延迟关闭的时间,默认0
          shouldCloseOnOverlayClick={true}   // 指定在div overlay上点击,是否关闭模态框,默认true
          shouldFocusAfterRender={false}  //指定模态框出现后,是否被默认选中,默认true
          shouldCloseOnEsc={true}  // 指定按esc键,是否关闭模态框,默认true(要选中div content,才有效)
          shouldReturnFocusAfterClose={false} // 指定是否应将焦点恢复到,显示前具有焦点的元素,默认true

          overlayRef={node => this.overlayRef = node}   // 可以获取div overlay的整个DOM节点
          contentRef={node => this.contentRef = node}   // 可以获取div content的整个DOM节点
          parentSelector={this.getParent}   // 配合指定的方法,指定"Modal单独生成的DOM"的父级元素,该demo中,指定到了div App中
          ariaHideApp={false}   //如果没有添加到某个DOM节点中,就会显示警告,为了不显示警告,设置为false,默认true。

          // portalClassName="protal"   // 指定div Portal的classname(因为没有默认样式,所以一般不用指定)。
          // contentLabel="一个demo"   // 显示在div content的自定义属性:aria-label="通告给屏幕的内容"。
        >
          <button onClick={this.closeModal}>关闭模态框</button>
        </Modal>
      </div>
    );
  }
}

export default App;
复制代码
  • 这是css

一般来说,这两个div应该是重叠在一起显示的,这里设置的样式,将其分开,是为了测试演示效果。

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  border: 5px solid silver;
  animation: fade 2s;
}
.content {
  position: absolute;
  width: 50%;
  height: 50%;
  border: 5px solid salmon;
  animation: fade 2s;
}
/*
* 这里,我自己指定了一个过渡动画。
*/
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
复制代码

以上,就是整体的配置参数的介绍,希望对大家有帮助。

文章分类
前端
文章标签