[問題] React中滑鼠移入、移出，state的控制

看板Web_Design作者ctah (藍寶)時間5年前 (2019/10/29 00:06)推噓0(0推 0噓 15→)

留言15則, 2人參與討論串1/1

範例如下： https://stackblitz.com/edit/react-gv3phw?file=index.js 兩個DIV區塊，當滑鼠移入的時候顯示該區塊的文字，滑鼠移出的時候隱藏該區塊的文字可是實際做的時候發現當單一區塊移入移出都沒有問題可是從左區塊移入右區塊卻發現文字怎麼都顯示正常應該頁面上只會有一個顯示於是下了個console.log看結果發現原本預期的步驟是 enter render leave render enter render leave render 但是跑出來是 enter render leave enter render leave render 沒錯~中間少了個render造成結果不正確但一直想不到是為什麼? 我在onMouseEnter跟onMouseLeave都有下setState 為何從區塊移到另一個區塊時卻沒有發生render? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.70.222.22 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1572278815.A.5AC.html

→

Hevak

10/29 00:43, 5年前 , 1^F

10/29 00:43, 1^F

→

Hevak

10/29 00:43, 5年前 , 2^F

10/29 00:43, 2^F

→

Hevak

10/29 00:47, 5年前 , 3^F

10/29 00:47, 3^F

→

Hevak

10/29 00:48, 5年前 , 4^F

10/29 00:48, 4^F

→

Hevak

10/29 00:48, 5年前 , 5^F

10/29 00:48, 5^F

→

Hevak

10/29 00:49, 5年前 , 6^F

10/29 00:49, 6^F

→

Hevak

10/29 00:49, 5年前 , 7^F

10/29 00:49, 7^F

→

Hevak

10/29 00:49, 5年前 , 8^F

10/29 00:49, 8^F

→

Hevak

10/29 00:50, 5年前 , 9^F

10/29 00:50, 9^F

→

Hevak

10/29 00:50, 5年前 , 10^F

10/29 00:50, 10^F

→

Hevak

10/29 00:51, 5年前 , 11^F

10/29 00:51, 11^F

→

Hevak

10/29 00:51, 5年前 , 12^F

10/29 00:51, 12^F

謝謝大大~再請問一個問題當我從左區塊移入右區塊的時候到底是左區塊的onMouseLeave先觸發還是右區塊的onMouseEnter先觸發因為仔細想了一下順序 (左區塊移入→移到右區塊→移出右區塊) f f (初始) f f (初始) t f (左 mouseEnter) t f (左 mouseEnter) f f (左 mouseLeave) ★ t t (右 mouseEnter) f t (右 mouseEnter) f t (左 mouseLeave) f f (右 mouseLeave) f f (右 mouseLeave) 因為★處好像會影響state不同的狀態(雖然最後結果一樣) 然後發現最早問題裡的render狀態 mouseEnter跟mouseLeave會有一處沒render的那個部分恰好是這個瞬間那不就好在沒render，所以最後結果是相同還是說那個瞬間因為是非同步執行，所以是同時發生的 ※ 編輯: ctah (122.116.84.179 臺灣), 10/29/2019 09:36:00 ※ 編輯: ctah (122.116.84.179 臺灣), 10/29/2019 09:41:57

→

y3k

10/29 12:27, 5年前 , 13^F

10/29 12:27, 13^F

→

Hevak

10/30 05:36, 5年前 , 14^F

10/30 05:36, 14^F

→

Hevak

10/30 05:36, 5年前 , 15^F

10/30 05:36, 15^F