モーダルの表示/非表示

プログラミングの勉強日記

2020年6月22日　Progate Lv.144
ReactⅢ
モーダル（ポップアップ）について学んだ。

モーダルの非表示

　モーダルはクリックによって表示/非表示が切り替わる。なので、モーダルが表示されているかどうかの情報をstateにする。
　isModalOpenという真偽値型のstateを用意して、trueなら表示、falseなら非表示にする。つまり、trueのときはモーダルのJSXが存在し、falseのときはモーダルのJSXは存在しないようにする。

lesson.js(stateの定義)

class Lesson extends React.Component{
  constructor(props){
    super(props);
    this.props={isModalOpen:false}
  };
...

JSXと変数

　JSXは変数に代入して、{変数名}で表示することができる。

sample.js

render(){
  let text=<p>Hello Reacr</p>
  return(
    <div>
      <h1>Hello World</h1>
      {text}
    </div>
  );
}

　変数textに代入したJSXを表示している。

JSXとif文

　isModalOpenがtrueのときのみ表示する。変数modalを用意して条件分岐を行う。

Lesson.js

render()[
  let modal;
  if(this.state.isModalOpen){  //isModalOpenがtrueのときに実行される
    modai= //modalのJSX部分
  }
  return(
    ...
    <div>
      <p>{this.props.name}<p/>
      {modal}  //変数modalに代入されたJSXが表示される。
    </div>
   ...

モーダルの表示

Lessonjs(stateを変更するメソッドの作成)

handleClickLesson(){
  this.setState({isModal:true});

Lessonjs(メソッドを呼び出すonClickイベントの設定)

//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickLesson()} } />

モーダルの非表示

　「とじる」ボタンをクリックしたときにモーダルを閉じる。

Lessonjs(stateを変更するメソッドの作成)

handleClickClose(){
  this.setState({isModal:false});

Lessonjs(メソッドを呼び出すonClickイベントの設定)

//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickClose()} } />

テストコード

Lesson.js

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }
  
  handleClickClose(){
    this.setState({isModalOpen:false});
  }

  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
              <p>{this.props.introduction}</p>
            </div>
            <button
              className='modal-close-btn'
              onClick={()=>{this.handleClickClose()}}
            >
              とじる
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;