react.js change input value with javascript

Question

I would like to change the values with javascript/jquery but when I hit submit, the old initial values are used and not my new ones.

I cannot change the react code, I can only change the values with javascript/jquery as shown below.

var value = "randomIntValue";
$("input[data-reactid='.0.2.0.0.0.0.0.2.0.0.3.0.3.0.0']").val(value).change();

The above code doesn't work!

Is there a good reason why you're not able to touch the react code? I'm sure there is an easy solution to create the desired output in react without using jQuery — jmancherje
– jmancherje, Commented Jun 21, 2016 at 6:58
It's not my own code and I must automate some processes, there are standart values inside the input fields, and I need to change them — Ilario Engler
– Ilario Engler, Commented Jun 21, 2016 at 6:59
To trigger the event. I read some reactjs docs and saw that it's implemented like onchange(); but correct me if I'm wrong, I'm not familiar with reactjs — Ilario Engler
– Ilario Engler, Commented Jun 21, 2016 at 8:24
First I click an element on a page with jquery, then wait 2s and the set the values. This is successful, I see the new values. But then when I hit submit the values switch back to the defaultvalues and they are also submitted. — Ilario Engler
– Ilario Engler, Commented Jun 21, 2016 at 9:08

Chris · Accepted Answer · 2016-06-21 09:54:09Z

3

From what I can gather from the comments above, the problem you're having is that you're trying to change a React-controlled component through jQuery.

This is not possible because you cannot update the React state from the view directly. When you run your jQuery code, the changes are only temporarily applied to the DOM, but React does not know about this. As such, when React needs to re-render the view the old values in the DOM will be overwritten.

Also, accessing the component via the data-reactid is a bad approach because the value is likely to change if any changes are made the React virtual-DOM.

Using React and jQuery is usually a bad idea when trying to apply DOM changes. If you cannot access/change any React code, I'm afraid you're out of luck.

edited Jun 21, 2016 at 9:54

answered Jun 21, 2016 at 9:43

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ilario Engler Over a year ago

thank you, it helped me a lot to understand why it's not working. But when I focus the input field and type something in, then it's actually working ... isn't it possible to emulate this by jquery ... I'm thinking of focus(). No it's not my homepage, I can access it only over the view by jquery/js

Chris Over a year ago

Oh that's interesting. So the React component is listening to an event and updates the internal state. Can you find out what event it is listening to?

Ilario Engler Over a year ago

yeaa I think so, it's an input field an when you input something everything is fine, but when you emulate that input with .val() or text() it doesn't work. I'm still searching on which event it is listening to.

Chris Over a year ago

Try entering in the console getEventListeners("input[data-reactid='.0.2.0.0.0.0.0.2.0.0.3.0.3.0.0']")

Ilario Engler Over a year ago

when I use getEventListeners, I get Uncaught ReferenceError: getEventListeners is not defined, but give a look at this screenshot from google chrome dev tools: picpaste.de/b38127b47fbf42b4661e025fbbb8ee81.png I tried also with .blur() but no way.

Collectives™ on Stack Overflow

react.js change input value with javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related