React.js setting value of input

Question

I am a beginner with react.js and it\'s amazing but I am facing a real problem: I need to set the value of an input using plain and pure javascript but form some reason reac

Answer 1

This is the key in your question,

But for some reason React.js is not updating this value on its core

The main reason is that react works within a 'shadow dom', and your

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";

Inst updating the reacts value in any way just the window dom object.

React has built in functions to update the value of the input. Try that way.

Check this page for more info about react forms: https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 2

I had a form that I needed to submit for some monitoring. I did it like this:

$("input[type=email]").value = "me@something.com"
$("input[type=email]").defaultValue = "me@something.com"
$("input[type=password]").value = "mystellarpassword"
$("input[type=password]").defaultValue = "pinpmystellarpasswordss"
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true} ));
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true} ));
$("button.login").click()

Note that for the website I was logging into, I had to set both value and defaultValue. There was some extra validation logic bound to the input.value

Answer 3

You should post your code in order to get a better/ more to your situation suited answer, but one think that will work is just setting the

defaultValue

instead of value of the input. Take a look at your browsers console, that's what react will log there.

Depending on your code, you can set the states value onKeyUp or similar with a function or fetch the new inputs value when the form is submitted.

Answer 4

I have written and use this function to trigger the change state for the field:

function doEvent( obj, event ) {
    /* Created by David@Refoua.me */
    var event = new Event( event, {target: obj, bubbles: true} );
    return obj ? obj.dispatchEvent(event) : false;
}

Use it like this:

var el = document.getElementById("CntctFrm2emailField");
el.value = "testing@gmail.com";
doEvent( el, 'input' );

Answer 5

For React 16 above solutions are not working. Check this issue from GitHub.

function setNativeValue(element, value) {
    let lastValue = element.value;
    element.value = value;
    let event = new Event("input", { target: element, bubbles: true });
    // React 15
    event.simulated = true;
    // React 16
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    element.dispatchEvent(event);
}

var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");

Answer 6

if the input is not in a html form, then you should do it this way:

document.getElementById("CntctFrm2emailField")[0].value = "testing@gmail.com";

This should work