モーダルを完成させる【React】１/ ２
通称モーダル(Modal)を表示させる
Progate ReactⅢ モーダルを表示する より
ざっくりと作業手順をメモする
stateを変更する
メソッドを定義handleClickLessonメソッドを定義する
handleClickLessonメソッドの定義部分で、「handleClickLesson」の後ろに括弧「( )」を設置
isModalOpenの値を変更するために、this.setStateを用いる
stateの「isModalOpen」の値を「true」に変更する処理を追加
<div className='lesson-item'>タグ内に、onClickイベントを追加
onClickイベントに、「handleClickLesson」メソッドを呼び出す処理を追加
「this.handleClickLesson」の後に、括弧「( )」を追加
ここまで。
そうすると下記のHTML＆CSSについての説明POPが表示されるようになる
ただし、"とじる"ボタンは機能していないので、次のブログにて記述式を解説する。
今回はここまでになります。
お疲れ様でした😊
今回学習したページ
