window.confirmは簡単な実装でOK/キャンセルの処理を作ることが出来ます。しかしその汎用性に反し対応していないosが多く
ちゃんと発動するか不明な点が多いことと、ESLintで引っかかることもありストア向けのアプリには不向きです。
最初見つけた時はこれめっちゃ便利じゃん他のアプリにも入れたろと考えましたが
reactではandroidやiosでwebviewを介してみるので爆弾扱いされているみたいですね。
てな訳で素直にdialogを使いましょうということにしました。
material-uiではスタイリッシュなコンポーネントがずらりと揃っていますが今開発しているアプリでも
使われているmaterial-uiのdialogコンポーネントを使うことにしました。（こっちのほうがずっとかっこいいです）
</pre>
choice(i){
this.setState({index: i});
this.setState({deleteMessage : "削除しますか？"})
this.setState({deleteOpen: true});
}
delete() {
const i = this.state.index;
this.state.count.splice(i,1);
this.setState({count: this.state.count});
this.DialogClose();
}
deleteDialogClose() {
this.setState({deleteOpen: false});
}
render() {
const i = this.state.count;
const reText = i;
const deleteActions = [
<FlatButton
label="削除する"
primary={true}
onTouchTap={this.delete}
/>,
<FlatButton
label="キャンセル"
primary={true}
onTouchTap={this.deleteDialogClose}
/>,
];
return (
<Dialog
actions={deleteActions}
modal={true}
open={this.state.deleteOpen} >
{this.state.deleteMessage}
</Dialog>
)
}
<pre>
render内でダイアログのオプションを設定してreturn内でそのオプションを取り込んで実際にトリガーが発火
した時にダイアログの処理内容を引数に合わせて変えていくイメージで作りました。
最初はどこで発火するんだ？と迷子状態ですが、this.setState({Open: true});でon状態になるとダイアログが
起動することが分かったので一安心。
とりあえずthis.setState({Open: true});で発火することを覚えておけば適当な関数にこれを設置して
さきほど切り分けた処理を実際に試すことができるみたいですね、覚えておきます。
ちなみにメッセージはthis.setState({Message : “hoge!!”})で変えられますのでそちらもお見知りおきを・・・。
使ってみた感想：良かったです。従来のjsのダイアログより優しい・安心のmaterial-uiブランドなので視覚的に優しいと
優しい尽くしでした。とくに凝ったデザインにしないならば第一におすすめします。
