Изображение мерцающая проблема в реактиве, когда изображение условно отображается

Question

У меня есть заголовок, и я хочу показать изображение справа, когда мышь над заголовком.

• я поддерживаю переменную Editmode в государстве, которое устанавливается истина/ложь

• Тогда я условно рендеринга изображения с помощью OnMouseOver и onMouse события.

Теперь, когда я наведите курсор мыши на заголовке, режим редактирования устанавливается истина, и изображение появляется и при перемещении курсора из заголовка, то Editmode устанавливает ложь, и изображение исчезает.

я поддерживаю переменную Editmode в государстве, которое устанавливается истина/ложь 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

Если у вас есть контейнер, который собирается сделать событие OnMouseOver, который визуализирует в DIV внутри вы должны использовать OnMouseLeave. В примере скриптов тоже есть onmouseleave.

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

это показывает проблему