詳細介紹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;
  }
}
複製代碼

以上，就是總體的配置參數的介紹，但願對你們有幫助。