Modify React Component's State using jQuery/Plain Javascript from Chrome Extension

I am building a tiny Chrome Extension for my own personal use.

In Facebook's ads manager(Uses React) i want to change a textarea field's value to a value generated by my chrome extension.

i tried it doing the old fashion way like this

document.querySelector('textarea').value = myValue; 

this changes the value on screen but in chrome's inspect element the value doesn't change and when i focus on the input element value resets.

Here is the picture of how react component looks like:

Here is the picture of this react components props & states:

In above component i want to change the state.displayValue to my value.

how it can be done?

2 Answers

Answers 1

@Bandal react needs to be notified that the inputs value has changed. You will need to dispatch a change event after you have updated the value.

    document.querySelector('textarea').value = myValue;     const event = new Event('input', { bubbles: true })     document.querySelector('textarea').dispatchEvent(event) 

Original answer here

Answers 2

As mentioned previously, you need to notify react about your manual changes. However, with React 16 this is not so straightforward.

const element = document.querySelector('textarea') const event = new Event('input', { bubbles: true }) const previousValue = element.value  element.value = 'next value' element._valueTracker.setValue(previousValue) element.dispatchEvent(event) 

Here is a working codesandbox with source code.
To see demo only you can open this link and call window.triggerChange('new value') function directly from browser dev tools console.

You'll see React's onChange and then setState events being triggered! 🎉

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati