Simulieren Click-Ereignis auf reagieren Element

Question

Ich versuche, ein .click()event auf einem React Element zu simulieren, aber ich kann nicht herausfinden, warum es nicht funktioniert (Es reagiert nicht, wenn ich die event bin Brennen).

Ich möchte einen Facebook-Kommentar nur mit JavaScript, aber ich bin im ersten Schritt stecken (tun Sie eine .click() auf div[class="UFIInputContainer"] Element).

Mein Code ist:

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

Und hier ist die URL, wo ich versuche, es zu tun: https://www.facebook.com/plugins/feedback.php...

P. S. Ich habe keine Erfahrung mit React und ich weiß nicht wirklich, ob das technisch möglich ist. Es ist möglich?

EDIT: Ich versuche, dies von Chrome DevTools Console zu tun.

Answer 1

Verwenden Sie refs, um das Element in der Callback-Funktion abzurufen und einen Klick mit der Funktion click() auszulösen.

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>

Answer 2

aus früheren Lösung inspiriert und mit einiger JavaScript-Code-Injektion auch possibile zum ersten ist injizierenReagieren in der Seite und dann ein Klick-Ereignisses auf der Seite Elementen Feuer .

let injc=(src,cbk) => { let script = document.createElement('script');script.src = src;document.getElementsByTagName('head')[0].appendChild(script);script.onload=()=>cbk() } 
 
injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js",() => injc("https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js",() => { 
 

 
class ReactInjected extends React.Component{ 
 
    simulateClick(e) { 
 
    e.click() 
 
    } 
 
    render(){ 
 
    return <div className="UFIInputContainer" 
 
    ref={this.simulateClick} onClick={()=> console.log('click injection')}> 
 
     hello 
 
     </div> 
 
    } 
 
} 
 
ReactDOM.render(<ReactInjected/>, document.getElementById('app')) 
 

 
}))

<div id="app"></div>