回答編集履歴

6

テキスト修正

2019/08/31 04:10

投稿

jun68ykt
jun68ykt

スコア9058

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

テキスト修正

2019/08/31 04:10

投稿

jun68ykt
jun68ykt

スコア9058

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
- とはいえ、かなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えます。
79
+ とはいえ、やっていることがかなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを作して、表示、非表示のフラグを `this.state` の中に持てるようにしたほうがよいように思えます。
80
80
 
81
81
  以下、ダイアログを自作する際のベースとなるコンポーネントとして、候補になりそうなものを挙げます。
82
82
 

4

テキスト修正

2019/08/31 04:01

投稿

jun68ykt
jun68ykt

スコア9058

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

テキスト修正

2019/08/30 18:24

投稿

jun68ykt
jun68ykt

スコア9058

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

テキスト修正

2019/08/30 17:25

投稿

jun68ykt
jun68ykt

スコア9058

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

テキスト修正

2019/08/30 17:22

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック(タップ)してダイアログが消えるときにも、focusイベント や blur イベントが発生していることかと思われます。
7
7
 
8
- そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているというを表すフラグを `this.state` の中に持ので、苦肉の策が必要と思います。
8
+ そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているという2状態完全に同期したフラグを `this.state` の中に持たせることは困難なので、苦肉の策が必要と思います。
9
9
 
10
10
  一例として、以下のように修正してみました。
11
11