Chrome × ReactでonMouseLeaveがうまく動かない問題

問題

svg要素を包むコンポーネントにonMouseLeaveを指定してコンポーネントから出たときにアクションを発火させたかったのだがうまく動かなかった。
具体的には素早くカーソルを動かすと、イベントを拾ってくれないようで想定した挙動が起こらないというものだ。

解決策

https://github.com/facebook/react/issues/4492#issuecomment-426356566

このissueのコメントのやり方で治った。
2つ挙げられているうちの2つ目で、svgを包む要素に pointer-events: none を指定すればいいとのこと。

redux-sageまとめ Reactパフォーマンス・チューニングチートシート react digraph使い方
View Comments
There are currently no comments.