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

以上，就是整體的配置參數的介紹，希望對大家有幫助。

原文釋出時間為：2018年06月28日

原文作者：非梧不栖

本文來源：

掘金 https://juejin.im/entry/5b2c4f426fb9a00e5f3e8d36

如需轉載請聯系原作者