CODEWITHSUNDEEP
reactjs
ethan852
ethan852

Reputation: 347

React manually fire mouseover event

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.

Upvotes: 4

Views: 5152

Answers (2)

Guillermo Aguirre
Guillermo Aguirre

Reputation: 841

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");

Upvotes: 4

ickyrr
ickyrr

Reputation: 2123

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.

Upvotes: -2

Related Questions