2

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

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

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

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

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

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

class TempComponent extends React.Component {
constructor() {
    super()
    this.editModeToggler = this.editModeToggler.bind(this)
    this.state = {
        editMode: false
    }
}

editModeToggler() {
    console.log('called')
    this.setState({editMode: !this.state.editMode})
}

render() {
  return(
    <div>
      <h3
        onMouseOut={this.editModeToggler} 
        onMouseOver={this.editModeToggler}
      >
        Title
      </h3>
      {this.state.editMode?
            <img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
        :
        null
      }
    </div>
  )
 }
}

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

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

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

4

2 に答える 2

2

h3にリスナーがある場合、最初は画像がレンダリングされていないため、最初はすべて正常に動作しているように見えますが、画像がレンダリングされて画像にカーソルを合わせると、見出しのマウスアウトイベントに応答し、これにより、h3 でマウスオーバーがトリガーされ、ちらつき動作が発生します。

問題を解決するには、リスナーをコンテナーにアタッチするだけです。フィドルhttp://jsfiddle.net/Lu4w4v1c/4/を更新しました

<div  onMouseOut={this.editModeToggler} 
    onMouseOver={this.editModeToggler}>
  <h3>
    Title
  </h3>
  {this.state.editMode?
        <img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
    :
    null
  }
</div>
于 2016-12-19T08:39:13.483 に答える
2

内部で div をレンダリングする onmouseover イベントを実行するコンテナがある場合は、onMouseLeave を使用する必要があります。例の fiddles にも onmouseleave があります。

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout

これは問題を示しています

于 2017-03-27T09:56:37.870 に答える