回答編集履歴
6
テキスト修正
answer
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
create-react-app でアプリを作成し、ご質問に挙げられている `ImputSomethingWithConfirm` をそのままコピペしてマウントさせると、確かにご質問にあるような(悩ましい) 状況を再現できました。
|
4
4
|
(ちなみに、スマホのブラウザを使わなくても、PCのChromeで確認できました)
|
5
5
|
|
6
|
-
原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック(タップ)してダイアログが消えるときにも、focusイベント や blur イベントが発生していること
|
6
|
+
原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック(タップ)してダイアログが消えるときにも、focusイベント や blur イベントが発生していることと考えられます。
|
7
7
|
|
8
8
|
そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているという2状態と完全に同期したフラグを `this.state` の中に持たせることは困難なので、苦肉の策が必要と思います。
|
9
9
|
|
5
テキスト修正
answer
CHANGED
@@ -74,9 +74,9 @@
|
|
74
74
|
```
|
75
75
|
|
76
76
|
上記で、 `render()` は、ご質問に挙げられているコードから修正していません。
|
77
|
-
念のため、上記の修正版の `ImputSomethingWithConfirm` を動作確認して、PCでもスマホのブラウザ(iPhone8 の Chrome と Safari)でも期待される動作に(一応)なっているかなと思
|
77
|
+
念のため、上記の修正版の `ImputSomethingWithConfirm` を動作確認して、PCでもスマホのブラウザ(確認に使用したのは、iPhone8 の Chrome と Safari)でも期待される動作に(一応)なっているかなと思えました。
|
78
78
|
|
79
|
-
とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作
|
79
|
+
とはいえ、やっていることがかなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを自作して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えます。
|
80
80
|
|
81
81
|
以下、ダイアログを自作する際のベースとなるコンポーネントとして、候補になりそうなものを挙げます。
|
82
82
|
|
4
テキスト修正
answer
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
こんにちは。
|
2
2
|
|
3
|
-
create-react-app でアプリを作成し、ご質問に挙げられている `ImputSomethingWithConfirm` をそのままコピ
|
3
|
+
create-react-app でアプリを作成し、ご質問に挙げられている `ImputSomethingWithConfirm` をそのままコピペしてマウントさせると、確かにご質問にあるような(悩ましい) 状況を再現できました。
|
4
4
|
(ちなみに、スマホのブラウザを使わなくても、PCのChromeで確認できました)
|
5
5
|
|
6
6
|
原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック(タップ)してダイアログが消えるときにも、focusイベント や blur イベントが発生していることかと思われます。
|
3
テキスト修正
answer
CHANGED
@@ -76,7 +76,7 @@
|
|
76
76
|
上記で、 `render()` は、ご質問に挙げられているコードから修正していません。
|
77
77
|
念のため、上記の修正版の `ImputSomethingWithConfirm` を動作確認して、PCでもスマホのブラウザ(iPhone8 の Chrome と Safari)でも期待される動作に(一応)なっているかなと思います。
|
78
78
|
|
79
|
-
とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作成して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えま
|
79
|
+
とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作成して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えます。
|
80
80
|
|
81
81
|
以下、ダイアログを自作する際のベースとなるコンポーネントとして、候補になりそうなものを挙げます。
|
82
82
|
|
2
テキスト修正
answer
CHANGED
@@ -76,7 +76,7 @@
|
|
76
76
|
上記で、 `render()` は、ご質問に挙げられているコードから修正していません。
|
77
77
|
念のため、上記の修正版の `ImputSomethingWithConfirm` を動作確認して、PCでもスマホのブラウザ(iPhone8 の Chrome と Safari)でも期待される動作に(一応)なっているかなと思います。
|
78
78
|
|
79
|
-
とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作成して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思
|
79
|
+
とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作成して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えました。
|
80
80
|
|
81
81
|
以下、ダイアログを自作する際のベースとなるコンポーネントとして、候補になりそうなものを挙げます。
|
82
82
|
|
1
テキスト修正
answer
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
|
6
6
|
原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック(タップ)してダイアログが消えるときにも、focusイベント や blur イベントが発生していることかと思われます。
|
7
7
|
|
8
|
-
そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているという
|
8
|
+
そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているという2状態と完全に同期したフラグを `this.state` の中に持たせることは困難なので、苦肉の策が必要と思います。
|
9
9
|
|
10
10
|
一例として、以下のように修正してみました。
|
11
11
|
|