質問編集履歴
3
自分で試してみたことを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
どこを修正したらいいのでしょうか…
|
|
12
12
|
よろしくお願いします＞＜
|
|
13
13
|
|
|
14
|
-
### 追記
|
|
14
|
+
### ~~追記~~
|
|
15
|
-
恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
15
|
+
~~恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
16
16
|
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
17
17
|
Reactの場合はイベント発生時に値を変更（handleMove）し、変更があったことを確認してから新しい値でレンダリングする、という流れのため、
|
|
18
18
|
ゆっくりマウスを動かしているうちは問題ないものの、
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
|
|
21
21
|
これはもう、Reactのstateで要素の位置を管理すること自体諦めるしか無いのでしょうか…
|
|
22
22
|
回答お待ちしています＞＜
|
|
23
|
-
|
|
23
|
+
~~
|
|
24
24
|
```Javascript
|
|
25
25
|
import React from 'react';
|
|
26
26
|
import PropTypes from 'prop-types';
|
|
@@ -94,4 +94,12 @@
|
|
|
94
94
|
|
|
95
95
|
export default withStyles(styles)(TestComponent);
|
|
96
96
|
|
|
97
|
-
```
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### さらに追記
|
|
100
|
+
一度、サイト様に記載されているコードをそのまま記述してみましたところ、なんと同じ症状が発生しましたOTL
|
|
101
|
+
サイト様のページでは、Div要素はスムーズに動いているので、不可能ではないはずなのですが…。
|
|
102
|
+
[こちら](https://codepen.io/rogi-chan-man/pen/ELJoGg)がCodePenで試したコードです。
|
|
103
|
+
CSSを少し編集したくらいで、JavaScriptのコードはコピペです。一切編集していません。
|
|
104
|
+
|
|
105
|
+
追記していた予想は外れていたようで…一向に原因がわかりません。助けてください（TmT）
|
2
追記に表現の誤りがあったので訂正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,8 +14,9 @@
|
|
|
14
14
|
### 追記
|
|
15
15
|
恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
16
16
|
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
17
|
-
Reactの場合はイベント
|
|
17
|
+
Reactの場合はイベント発生時に値を変更（handleMove）し、変更があったことを確認してから新しい値でレンダリングする、という流れのため、
|
|
18
|
+
ゆっくりマウスを動かしているうちは問題ないものの、
|
|
18
|
-
激しくマウスを動かすと、マウスの位置と、変更前の値でレンダリングされている要素の位置に差ができ
|
|
19
|
+
激しくマウスを動かすと、「実際のマウスの位置」と、「変更前の値でレンダリングされている要素の位置」に差ができ
|
|
19
20
|
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
|
|
20
21
|
これはもう、Reactのstateで要素の位置を管理すること自体諦めるしか無いのでしょうか…
|
|
21
22
|
回答お待ちしています＞＜
|
1
解決したい問題について、補足しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,6 +11,15 @@
|
|
|
11
11
|
どこを修正したらいいのでしょうか…
|
|
12
12
|
よろしくお願いします＞＜
|
|
13
13
|
|
|
14
|
+
### 追記
|
|
15
|
+
恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
|
|
16
|
+
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
|
|
17
|
+
Reactの場合はイベント→値を変更→変更後の値でレンダリング、という流れのため、
|
|
18
|
+
激しくマウスを動かすと、マウスの位置と、変更前の値でレンダリングされている要素の位置に差ができ
|
|
19
|
+
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
|
|
20
|
+
これはもう、Reactのstateで要素の位置を管理すること自体諦めるしか無いのでしょうか…
|
|
21
|
+
回答お待ちしています＞＜
|
|
22
|
+
|
|
14
23
|
```Javascript
|
|
15
24
|
import React from 'react';
|
|
16
25
|
import PropTypes from 'prop-types';
|