CODEWITHSUNDEEP
javascriptjqueryreactjs
Badal
Badal

Reputation: 3807

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:

1]

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

2]

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

how it can be done?

Upvotes: 17

Views: 3810

Answers (2)

amankkg
amankkg

Reputation: 5071

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! 🎉

Upvotes: 12

stwilz
stwilz

Reputation: 2397

@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

Upvotes: 2

Related Questions