問題タブ [conditional-rendering]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

288 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
2 に答える
6948 参照

reactjs - 画像が条件付きでレンダリングされるときの React での画像のちらつきの問題

ヘッダーがあり、マウスがヘッダーの上にあるときに右側に画像を表示したい。

  • true/false に設定された状態で変数editModeを維持しています

  • 次に、onMouseOver および onMouse イベントを使用して条件付きで画像をレンダリングしています。

ヘッダーにカーソルを合わせると、編集モードが true に設定され、画像が表示されます。カーソルをヘッダーの外に移動すると、editMode が false に設定され、画像が消えます。

onMouseOver と onMouse を使用して条件付きで画像をレンダリングする true/false に設定された状態で、変数editModeを維持しています。

問題:編集アイコンにカーソルを合わせると、ちらつき始めます。

ここで実行されているこのコードを見つけることができます: http://jsfiddle.net/Lu4w4v1c/2/

このちらつきを止めるにはどうすればよいですか。ここで提案されているように、onMouseEnter と onMouseLeave も使用してみましたが、うまくいきませんでした。方法はわかりませんが、これらの 2 つのイベントを使用すると、必要な結果が得られませんでした。コンポーネントが初めてロードされたときはすべて問題ありませんでしたが、アイコンにカーソルを合わせるとすぐにダイナミクス全体が変化します。マウスがヘッダー上にない場合はアイコンが表示され、マウスがヘッダー上にある場合は表示されません。助けてください

onMouseEnter と onMouseLeave のコードはここにあります: http://jsfiddle.net/Lu4w4v1c/3/


12345678910