Reactを使ってモーダルを作る

TypeScriptを使って、メイン画面でボタンを押しモーダルウィンドウを呼び出しました。
自分の備忘録として…。

※import文等簡略化している部分あり

致命的に足りない点等あればご指摘お願いします。

＊＊＊

メイン画面を作る

既にある場合はそれを使ってください。
ない場合、webのメインの画面となるものを作成しましょう。

メイン画面にモーダルを表示させるためのボタンを設置します。

<Button content="モーダルを呼ぶボタン" onClick={HogeStore.open} />

HogeStoreは後述

Modalの雛形を作る

ReactのModalタグを使い、表示したいModalのページを作ります。
react.semantic-ui.com

Modalを開くには、でtrueになる必要があります。
ボタンを押して開く／閉じると切り替えたいので、true/falseを入れるのではなく、boolean型の変数を置いてstoreのメソッドで切り替えます。
(もしtrue/falseを入れていた場合、いくらボタン等を押してもopenの中の値を変えることはできないので、一生開きっぱなし/閉じっぱなしになると思います。(あやふや))

例：

@observer
export class FooModal extends Component<IFoo>{ // ①

public render(){
const { hoge } = this.props
if(!hoge){
return null
}

return(
<Modal open={hoge.key}>　//hoge
<Modal.Header>モーダルのヘッダーだよ</Modal.Header>
<Modal.Content>ねこかわいい</Modal.Content>
<Modal.Actions></Button onclick={hoge.close} content=“閉じるボタン”></Modal.Actions>　//onClickで{}内のメソッドが呼ばれ実行される
</Modal>
)
}

①IFooはinterface.ts的なもの
　HogeStoreをFooでも使えるように、propsを経由して中身を渡しています。

Storeで変数の切り替えをする

Modalの開く／閉じるを切り替えるstoreの作成をします

export default class HogeStore {

@observable
public key = false

@action.bound
public open(){ this.key = true }

@action.bound
public close(){ this.key = false }
}

openメソッドでModal表示、closeメソッドでModalを閉じます。

メインに置く

メインページのindexにを置きます。
デフォルトでfalseになっているので、ボタンを押して作動させないかぎり表示はされません。

ざっくりとですが、ここ数日で行っていたモーダルの作成についてでした。