質問編集履歴
3
自分で試してみたことを追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
### 追記
|
|
27
|
+
### ~~追記~~
|
|
28
|
-
|
|
28
|
+
|
|
29
|
-
恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
29
|
+
~~恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
30
30
|
|
|
31
31
|
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
32
32
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
回答お待ちしています＞＜
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
~~
|
|
46
46
|
|
|
47
47
|
```Javascript
|
|
48
48
|
|
|
@@ -191,3 +191,19 @@
|
|
|
191
191
|
|
|
192
192
|
|
|
193
193
|
```
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
### さらに追記
|
|
198
|
+
|
|
199
|
+
一度、サイト様に記載されているコードをそのまま記述してみましたところ、なんと同じ症状が発生しましたOTL
|
|
200
|
+
|
|
201
|
+
サイト様のページでは、Div要素はスムーズに動いているので、不可能ではないはずなのですが…。
|
|
202
|
+
|
|
203
|
+
[こちら](https://codepen.io/rogi-chan-man/pen/ELJoGg)がCodePenで試したコードです。
|
|
204
|
+
|
|
205
|
+
CSSを少し編集したくらいで、JavaScriptのコードはコピペです。一切編集していません。
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
追記していた予想は外れていたようで…一向に原因がわかりません。助けてください（TmT）
|
2
追記に表現の誤りがあったので訂正しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -30,9 +30,11 @@
|
|
|
30
30
|
|
|
31
31
|
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
32
32
|
|
|
33
|
-
Reactの場合はイベント
|
|
33
|
+
Reactの場合はイベント発生時に値を変更（handleMove）し、変更があったことを確認してから新しい値でレンダリングする、という流れのため、
|
|
34
34
|
|
|
35
|
+
ゆっくりマウスを動かしているうちは問題ないものの、
|
|
36
|
+
|
|
35
|
-
激しくマウスを動かすと、マウスの位置と、変更前の値でレンダリングされている要素の位置に差ができ
|
|
37
|
+
激しくマウスを動かすと、「実際のマウスの位置」と、「変更前の値でレンダリングされている要素の位置」に差ができ
|
|
36
38
|
|
|
37
39
|
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
|
|
38
40
|
|
1
解決したい問題について、補足しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -21,6 +21,24 @@
|
|
|
21
21
|
どこを修正したらいいのでしょうか…
|
|
22
22
|
|
|
23
23
|
よろしくお願いします＞＜
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### 追記
|
|
28
|
+
|
|
29
|
+
恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
30
|
+
|
|
31
|
+
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
32
|
+
|
|
33
|
+
Reactの場合はイベント→値を変更→変更後の値でレンダリング、という流れのため、
|
|
34
|
+
|
|
35
|
+
激しくマウスを動かすと、マウスの位置と、変更前の値でレンダリングされている要素の位置に差ができ
|
|
36
|
+
|
|
37
|
+
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
|
|
38
|
+
|
|
39
|
+
これはもう、Reactのstateで要素の位置を管理すること自体諦めるしか無いのでしょうか…
|
|
40
|
+
|
|
41
|
+
回答お待ちしています＞＜
|
|
24
42
|
|
|
25
43
|
|
|
26
44
|
|