Question

64

Simulate click event on react element

rated 0 times [ 70] [ 6] / answers: 1 / hits: 120675 / 8 Years ago, mon, october 17, 2016, 12:00:00

I'm trying to simulate a .click() event on a React element but I can't figure out why it is not working (It's not reacting when I'm firing the event).

I would like to post a Facebook comment using only JavaScript but I'm stuck at the first step (do a .click() on div[class=UFIInputContainer] element).

My code is:

document.querySelector('div[class=UFIInputContainer]').click();

And here's the URL where I'm trying to do it: https://www.facebook.com/plugins/feedback.php...

P.S. I'm not experienced with React and I don't know really if this is technically possible. It's possible?

EDIT: I'm trying to do this from Chrome DevTools Console.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gonzaloulyssess

Add To Favorites

Follow

Total Points: 225

Total Questions: 114

Total Answers: 112

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

answered 8 Years ago tayaw · Accepted Answer

Use refs to get the element in the callback function and trigger a click using click() function.

class Example extends React.Component{

  simulateClick(e) {

    e.click()

  }

  render(){

    return <div className=UFIInputContainer

    ref={this.simulateClick} onClick={()=> console.log('clicked')}>

      hello

      </div>

  }

}



ReactDOM.render(<Example/>, document.getElementById('app'))

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=app></div>