詳細介紹React模態框元件react-modal

非梧不棲發表於2019-03-01
React元件

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;
  }
}
複製程式碼

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

相關文章