详细介绍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;
  }
}
复制代码

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