圖像有條件呈現時React中的圖像閃爍問題

Question

我有一個標題，並且當鼠標懸停在標題上時，我想在其右側顯示圖像。

• 我保持一個變量編輯模式中設置爲true /狀態假

• 那麼我有條件地渲染使用onmouseover和onMouse事件的圖像。

現在，當我將鼠標懸停在標題，編輯模式設置爲true，圖像顯示出來，當我將光標移出表頭的，在編輯模式下設置爲false，圖像消失。

我保持狀態的變量編輯模式被設置爲真/假consditionally渲染使用onmouseover和onMouse圖像：

問題：當我將鼠標懸停在編輯圖標，它開始閃爍。

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建議here但它沒有奏效。我不知道如何，但使用這兩個事件導致與我想要的相反。組件第一次加載時，一切都很好，但只要我將鼠標懸停在圖標上，整個動態就會改變。當鼠標不在標題上時該圖標顯示，並且當鼠標懸停在標題上時，該圖標不會顯示。請幫助

與OnMouseEnter在和OnMouseLeave在代碼是在這裏：http://jsfiddle.net/Lu4w4v1c/3/

Answer 1

當你有H3的監聽器，最初的圖像未呈現，因此在第一次似乎一切都工作正常，但一旦圖像被渲染，並且您將鼠標懸停在圖像上，它會響應標題的mouseout事件並立即隱藏圖像，從而在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> 

Answer 2

如果您有打算做呈現一個div裏面，你應該使用OnMouseLeave在onmouseover事件的容器。示例小提琴也有onmouseleave。

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

這說明了什麼問題