回答編集履歴
4
テキスト修正
answer
CHANGED
|
@@ -99,17 +99,13 @@
|
|
|
99
99
|
render(<App />, document.getElementById("root"));
|
|
100
100
|
|
|
101
101
|
```
|
|
102
|
-
上記のコード
|
|
102
|
+
上記のコードを以下にて動作確認することができます。
|
|
103
103
|
|
|
104
|
-
-
|
|
104
|
+
- **動作確認用 CodeSandbox:** [https://codesandbox.io/s/q223699-c55hf](https://codesandbox.io/s/q223699-c55hf?fontsize=14&hidenavigation=1&theme=dark)
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
これは、react-rnd の[サンプル](https://codesandbox.io/s/y3997qply9) をベースとして、ドラッグ対象のエリアをクリックすると、 react-modal によるモーダルが表示されるようにしたものです。モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。
|
|
107
107
|
|
|
108
|
-
- モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。
|
|
109
108
|
|
|
110
109
|
|
|
111
|
-
上記のコードを、以下にて動作確認することができます。
|
|
112
110
|
|
|
113
|
-
- **動作確認用 CodeSandbox:** [https://codesandbox.io/s/q223699-c55hf](https://codesandbox.io/s/q223699-c55hf?fontsize=14&hidenavigation=1&theme=dark)
|
|
114
|
-
|
|
115
111
|
以上、参考になれば幸いです。
|
3
テキスト修正
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
- [onClick and drag callbacks getting executed together #168](https://github.com/bokuweb/react-rnd/issues/168)
|
|
6
6
|
|
|
7
|
-
に投稿されている、[この回答](https://github.com/bokuweb/react-rnd/issues/168#issuecomment-327253830) を参考に下
|
|
7
|
+
に投稿されている、[この回答](https://github.com/bokuweb/react-rnd/issues/168#issuecomment-327253830) を参考に、以下を作成しました。
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
```jsx
|
|
@@ -99,18 +99,17 @@
|
|
|
99
99
|
render(<App />, document.getElementById("root"));
|
|
100
100
|
|
|
101
101
|
```
|
|
102
|
+
上記のコードは、
|
|
102
103
|
|
|
104
|
+
- react-rnd のデモ、[https://codesandbox.io/s/y3997qply9](https://codesandbox.io/s/y3997qply9) をベースとして、
|
|
103
105
|
|
|
104
|
-
|
|
106
|
+
- **react-rnd** と表示された灰色のエリアをクリックすると、 react-modal によるモーダルが表示されるようにしたものです。
|
|
105
107
|
|
|
106
|
-
-
|
|
108
|
+
- モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。
|
|
107
109
|
|
|
108
|
-
このサンプルは
|
|
109
110
|
|
|
110
|
-
|
|
111
|
+
上記のコードを、以下にて動作確認することができます。
|
|
111
112
|
|
|
112
|
-
- **
|
|
113
|
+
- **動作確認用 CodeSandbox:** [https://codesandbox.io/s/q223699-c55hf](https://codesandbox.io/s/q223699-c55hf?fontsize=14&hidenavigation=1&theme=dark)
|
|
113
114
|
|
|
114
|
-
- モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。
|
|
115
|
-
|
|
116
115
|
以上、参考になれば幸いです。
|
2
テキスト修正
answer
CHANGED
|
@@ -111,6 +111,6 @@
|
|
|
111
111
|
|
|
112
112
|
- **react-rnd** と表示された、灰色のエリアをクリックすると、 react-modal によるモーダルが表示されるようにしたものです。
|
|
113
113
|
|
|
114
|
-
- モーダルを消去するには、モーダルの外側をクリックするか、
|
|
114
|
+
- モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。
|
|
115
115
|
|
|
116
116
|
以上、参考になれば幸いです。
|
1
テキスト修正
answer
CHANGED
|
@@ -105,10 +105,12 @@
|
|
|
105
105
|
|
|
106
106
|
- **動作確認用 CodeSandbox:** [https://codesandbox.io/s/q223699-c55hf](https://codesandbox.io/s/q223699-c55hf?fontsize=14&hidenavigation=1&theme=dark)
|
|
107
107
|
|
|
108
|
-
このサンプル
|
|
108
|
+
このサンプルは
|
|
109
109
|
|
|
110
|
-
-
|
|
110
|
+
- react-rnd のデモ、[https://codesandbox.io/s/y3997qply9](https://codesandbox.io/s/y3997qply9) をベースとして、
|
|
111
111
|
|
|
112
|
+
- **react-rnd** と表示された、灰色のエリアをクリックすると、 react-modal によるモーダルが表示されるようにしたものです。
|
|
113
|
+
|
|
112
114
|
- モーダルを消去するには、モーダルの外側をクリックするか、ERSCキーを押します。
|
|
113
115
|
|
|
114
116
|
以上、参考になれば幸いです。
|