Nick H
Nick H

Reputation: 227

Editing DOM of a Web Page Built with React

I'm trying to change the value of a textarea on ShipStation's "orders" page. The page is built with React, and I can see that when I type into the textarea, that element re-renders after every keystroke.

There is a save button next to the text area (the checkmark):

 (

I'm trying to use a script to:

  1. Open the textarea (done with calling .click() on the element).
  2. Change the textarea value (should work with textarea.value = 'some value').
  3. Click the save button next to the text area (again with .click()).

All of the above actions do take place and my value appears in the textarea, however the value does not get saved to the server. In fact, after saving a value using textarea.value, if I just hover my mouse over the text area, the text I had in there disappears.

So I'm not really sure what's happening here or if it's even doable. But something is causing my textarea value to disappear, and I think it has something to do with React saving the keystrokes to its props, but since I'm not using keystrokes (using Javascript directly to manipulate), its not saving my value to the props so when it re-renders there is nothing new, still just a blank value?

Does that sound right? Am I missing something and is there a way around this?

Upvotes: 0

Views: 89

Answers (1)

Çağatay Sel
Çağatay Sel

Reputation: 810

Since there is no code, i assume the react component handles the value of the text area you are editing in its state and renders the value that is in the state. You can manipulate dom to change the value but since you have not changed the value in the state, react will render the value in the state in the next render. If you are able to edit the react components code you can add an event listener on window object to listen events which can be triggered outside of react and update the state in your event listener. Then you can trigger the listener by publishing events on the window from outside of react.

Upvotes: 1

Related Questions