【React】react-modalの簡単実装するための9つの手順とハマりポイント
業務でmodalを実装したのですが、ハマったところがありました。
で、それにまつわる記事がなかったので書きます
作るモーダルは
これ
githubにReact-Sampleとしておいています。ここ
他のサンプルと混在していて見にくいですが。。
作り方
1. npm i -D react-modal
プロジェクトのnode_modulesにインストールしてください
2. 親コンポーネントでreact-modalを読み込む
ここ
[code language="javascript"]
import Modal from 'react-modal';
[/code]
3 トリガーになるidを付与、button設置
※WPエディタがhtmlタグと認識してしまうので画像で表示しています
ここ
[code language="javascript"]
<h2 id="modal">react-modal</h2>
<button className="btn btn-primary" onClick={this.openModal}>open modal</button>
<Modal><button onClick={this.closeModal}>Close<button></Modal>
[/code]
//ここでのcloseボタンの位置に注意してください。ここで更に下、子コンポーネントにthis.closeModalを渡すことはできません
4 stateを管理(初期はOpenではないのでfalse)
ここ
[code language="javascript"]
this.state = {
modalIsOpen: false
}
[/code]
5 constructorでbind
ここ
[code language="javascript"]
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
[/code]
6 this.openModalとthis.closeModalを実装
//setStateでbooleanを渡すだけ
ここ
[code language="javascript"]
openModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({modalIsOpen: false});
}
[/code]
7.Modalのpropに設定を渡す
ここ
[code language="javascript"]
<Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} style={customStyles}>
//ここで最低限必要なのはisOpenだけです。
//あとはご自由に
[/code]
7_2 スタイルをカスタムしたい場合styleにcustomStyleを渡す
//render内です。
ここら辺
[code language="javascript"]
const customStyles = {
overlay : {//ovelayの色を変える
background: 'rgba(0,0,0, .4)'
},
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
width : '72%'//openしているコンテンツの幅を変える
}
};
[/code]
8、モーダルを実装しているコンポーネントのclassより外に下記
ここらへん
[code language="javascript"]
const appElement = document.getElementById('content');
Modal.setAppElement(appElement);
[/code]
わかりずらかったらチュートリアルのここ見てね
9 おしまい
おしまいです。どうでしょうか？？
はまりポイント
ハマったところは
3の閉じるボタンの位置でした。。
これはModalコンポーネントの直下に置かなくてはならず、、これをModalコンポーネントの子コンポーネントの中で使うことが
できませんでした。
子コンポーネントにpropsで渡しているんですけどいけなかった。
子コンポーネントではいろいろなボタンがあり、そのボタンの状態を管理して、「今の状態でcloseする 」ということが
したかったのですが、そこにはcloseModalは実装できず、
ここにもかいてある「subComponentは持てない」って。
ではModal直下にcloseを置くといろいろなボタンの状態を変えるとモーダル下のrenderが走ってしまう。
(それはshouldComponentUpdateで制御しなくてはだめ)
でした。
また
closeModal内で他の関数を呼べなかった気がする。。これは多くの時間を割いて調査していませんが、、
わかっちゃえば簡単なのですが、地味にやられました。
でわ〜〜〜
【 併せて読みたい 】
【React】Reactの動きを理解したい人の為の最小サンプル
【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい
【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】