teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

自分で試してみたことを追記しました。

2018/05/23 08:12

投稿

serona
serona

スコア25

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

追記に表現の誤りがあったので訂正しました。

2018/05/23 08:12

投稿

serona
serona

スコア25

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

解決したい問題について、補足しました。

2018/05/23 07:08

投稿

serona
serona

スコア25

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';