How to programmatically populate input elements created with React?

Question

I have been instructed to crawl a website created with React. I am trying to fill in the input fields and submit the form using javascript injection on the page (selenium or web browsing on mobile devices). It works like a charm on all other sites + technology, but React seems like a real pain.

so here is a sample code

var email = document.getElementById( 'email' ); email.value = ' [e-mail] '; 

The I value changes on the DOM input element, but React does not raise a change event.

I tried to use many ways for React to update the state.

 var event = new Event('change', { bubbles: true }); email.dispatchEvent( event ); 

To no avail

 var event = new Event('input', { bubbles: true }); email.dispatchEvent( event ); 

does not work

 email.onChange( event ); 

does not work

I can't believe the interaction with React was so complicated. I would really appreciate any help.

thanks

Answer 1

React listens for the input event of text fields.

You can change the value and manually trigger an input event, and the onChange handler handler will fire:

 class Form extends React.Component { constructor(props) { super(props) this.state = {value: ''} } handleChange(e) { this.setState({value: e.target.value}) console.log('State updated to ', e.target.value); } render() { return ( <div> <input id='textfield' value={this.state.value} onChange={this.handleChange.bind(this)} /> <p>{this.state.value}</p> </div> ) } } ReactDOM.render( <Form />, document.getElementById('app') ) document.getElementById('textfield').value = 'foo' const event = new Event('input', { bubbles: true }) document.getElementById('textfield').dispatchEvent(event) 

 <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

This decision does not seem to work in React> 15.6 (including React 16) as a result of changes in input deduplication and change events.

You can see the React discussion here: https://github.com/facebook/react/issues/10135

And the suggested workaround is here: https://github.com/facebook/react/issues/10135#issuecomment-314441175

Reproduced here for convenience:

Instead

 input.value = 'foo'; input.dispatchEvent(new Event('input', {bubbles: true})); 

Would you use

 function setNativeValue(element, value) { const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set; const prototype = Object.getPrototypeOf(element); const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set; if (valueSetter && valueSetter !== prototypeValueSetter) { prototypeValueSetter.call(element, value); } else { valueSetter.call(element, value); } } 

and then

 setNativeValue(input, 'foo'); input.dispatchEvent(new Event('input', { bubbles: true })); 

Answer 3

what would the situation be if its a drop-down "choose". I'm tired of changing the event to "change", but I get an error

Uncaught TypeError: Unable to read the 'set' property from undefined