Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@anago1030

React基本事項の備忘録③

はじめに

ProgateでReactの第三章も学習を終えたので備忘録としてまとめたいと思います。

モーダルウィンドウの表示

モーダルウィンドウは、元のウィンドウの上に別枠で表示されるウィンドウのことです。
よくポップアップと混同されがちですが、ポップアップは表示を目立たせることが目的なのに対して、モーダルウィンドウは操作の制御をすることが目的です。

前回のファイル構成を維持しつつ、新しくモーダルウィンドウに関するコードを追記していきたいと思います。

ディレクトリ構造
React
|-
App.js
import React from 'react';
{/* Lesson.jsをインポート */}
import Lesson from './Lesson';

class Main extends React.Component {
  render() {
  {/* lessonListを定義 */}
    const lessonList = [
      {
        name: 'HTML & CSS',
        image: 'HTML&CSS.png',
        introduction: 'WEBページはHTML、CSSという言語によってその見た目が作られています。',
      },
      {
        name: 'Sass',
        image: 'Sass.png',
        introduction: 'SassはCSSをより便利に効率的にするための言語です。',
      },
      {
        name: 'JavaScript',
        image: 'JavaScript.png',
        introduction: 'JavaScriptはフロントエンドだけでなく、サーバーサイドまで広い可能性を持つプログラミング言語です。',
      },
      {
        name: 'React',
        image: 'React.png',
        introduction: 'ReactはHTMLのように、サイトの見た目をつくることができるJavaScriptのライブラリです。',
      },
    ];

    return (
      <div className='main-wrapper'>
        <div className='main'>
          <div className='copy-container'>
            <h1>Hello, World.</h1>
            <h2>プログラミングの世界へようこそ</h2>
          </div>
          <div className='lesson-container'>
            <h3>学べるレッスン</h3>
       {/* mapメソッドで繰り返し処理 */}
            {lessonList.map((lessonItem) => {
              return (
                <Lesson
                  name={lessonItem.name}
                  image={lessonItem.image}
           {/* introductionを追加 */}
                  introduction={lessonItem.introduction}
                />
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default Main;
Lesson.js
import React from 'react';

class Lesson extends React.Component {  
  render() {
    return (
      <div className='lesson-card'>
        <div className='lesson-item'>
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {/* 追記部分 */}
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
         {/* introductionのpropsを受け取る */}
              <p>{this.props.introduction}</p>
            </div>
            <button className='modal-close-btn'>
              とじる
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default Lesson;

ここまでの記述でモーダルウィンドウの表示はできているのですが、画面に常に表示されてしまいます。なので表示/非表示を切り替える必要があります。

これをstateを用いて切り替えていきます。
具体的にはisModalOpenという真偽値型のstateを用意しtureのときには表示、falseのときは非表示というように設定します。
まずはstateを定義します。

stateの定義

Lesson.js
import React from 'react';

class Lesson extends React.Component {
  // constructorを定義
  constructor(props) {
    super(props);
    // stateの初期値を定義
    this.state = {isModalOpen:false};

  }

stateの表示

考え方としてはisModalOpenがtrueのときはLesson.jsにモーダルのJSXが存在し、falseのときは存在しないという方針で記述していきます。手順は以下の通りです。

1. 変数を用意する
2. if文でもしisModalOpenがtrueだったらという条件分岐を記述
3. モーダルのJSXを記述

1. 変数を用意する

Lesson.js
render (){
  {/* カラの変数であるmodalを定義 */}
  let modal;
}

if文でもしisModalOpenがtrueだったらという条件分岐を記述

Lesson.js
constructor(props) {
    super(props);
    // stateの初期値を定義
    this.state = {isModalOpen:false};
}
render (){
  {/* カラの変数であるmodalを定義 */}
  let modal;
  {/* 条件分岐 */}
  if (this.state,isModalOpen)
}

モーダルのJSXを記述

カラの変数modalにJSXを代入します。
tureのときはreturn内に変数modalを表示させます。

ルールとして変数に代入するJSXが複数行になる場合は( )でくくって記述します。

Lesson.js
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  render() {
    // 変数modalを定義
    let modal;

    // if文を用意
    if(this.state.isModalOpen) {
      {/* modalの中身は ( ) でくくる */}
      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'>
              とじる
            </button>
          </div>
        </div>
      )
    return (
        <div className='lesson-card'>
          <div className='lesson-item'>
            <p>{this.props.name}</p>
            <img src={this.props.image} />
          </div>
          {/* 変数モーダルを表示 */}
          {modal}
        </div>
     );
    }

ここまでで、条件分岐により表示/非表示の切り替えができました。
次にonClickイベントを用いてtrueとfalseを切り替えるコードを記述します。

モーダルウィンドウを表示する関数をhandleClickOpen
モーダルウィンドウを非表示にする関数をhandleClickCloseとします。

Lesson.js
import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }
  // handleClickOpen関数を定義
  handleClickOpen () {
    this.setState({isModalOpen: true});
  }

  // handleClickClose関数を定義
  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>
            {/* onClickイベントを追加 */}
            <button
              className='modal-close-btn'
              onClick={() => {this.handleClickClose()}}
            >
              とじる
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          {/* onClickイベントを追加 */}
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;

以上です!

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
anago1030
プログラミングを学びつつ現在は就活を頑張っています。 学びを深めるために発信をしていきます!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?