How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

Question

How can you achieve either a hover event or active event in ReactJS when you do inline styling?

I\'ve found that the onMouseEnter, onMouseLeave approach is buggy, so

Answer 1

I know It's been a while since this question was asked but I just run into the same issue of inconsistency with onMouseLeave() What I did is to use onMouseOut() for the drop-list and on mouse leave for the whole menu, it is reliable and works every time I've tested it. I saw the events here in the docs: https://facebook.github.io/react/docs/events.html#mouse-events here is an example using https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp:

handleHoverOff(event){
  //do what ever, for example I use it to collapse the dropdown
  let collapsing = true;
  this.setState({dropDownCollapsed : collapsing });
}

render{
  return(
    

      Dropdown Example
      
      

        
bla bla 1
        
bla bla 2
        
bla bla 3
      
    
  )
}