4

Is there anyway to trigger React's mouseover and mouseenter event? It's possible to fire:

ReactDOM.findDOMNode(someNode).focus();
ReactDOM.findDOMNode(someNode).click();

Is there a similar way to fire mouseenter? I need to do a complicated React event with a 3rd party library.

ethan852
  • 337
  • 6
  • 13

2 Answers2

4

From @Jonathan's answer in this question: Trigger onmouseover event programmatically in JavaScript

This worked for me:

function fireEvent(elementId, eventName) {
  if(document.getElementById(elementId) != null) {   
    if(document.getElementById(elementId).fireEvent) {
      document.getElementById(elementId).fireEvent('on' + eventName);     
    } else {   
      var evObj = document.createEvent('Events');
      evObj.initEvent(eventName, true, false);
      document.getElementById(elementId).dispatchEvent(evObj);
    }
  }
}

Then you can call it like this: 

fireEvent(elementId, "mouseover");
Guillermo Aguirre
  • 743
  • 1
  • 8
  • 16
-2

Have you tried using the React Synthetic Events? Here's an example:

class App extends React.Component {

  onEnter() {
        console.log('enter');  
  }

  onOver() {
        console.log('over');  
  }

    render() {
    return (
        <div style={{ backgroundColor: 'red', padding: '20px' }} onMouseOver={this.onOver}>
          <h1 onMouseEnter={this.onEnter}>Hello World</h1>
        </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('mainContainer'));

And here's the jfiddle for the above code.

ickyrr
  • 1,963
  • 1
  • 14
  • 14
  • 1
    This is not what I'm looking for. As I mentioned above, I'm getting the element using ReactDOM.findDOMNode and I need to trigger an event. What you are doing is adding an event listener only. – ethan852 Jun 20 '17 at 17:08