score:0

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

score:0

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

score:0

<button onclick={ async () => {
            await setshowmodal(true);
            document.getelementbyid('name').value = e.location_name;
            document.getelementbyid('province_id').value = e.province_id;
            document.getelementbyid('id').value = e.id;
        }} 
    classname="btn-round" color="success" type="button">
        edit
</button>

score:1

first of all, you should never ever work with "document" object in react.js. it is a big no no. you should not access dom element neither, but if you know what you are doing(like animations) you should create "ref" object, which is off the topic, to access dom element.

first thing you should have an object inside the state object for your form. lets say you have "username" and "password" fields in your form.

state={form:{username:"","password:""}

because input fields have their own state, whatever we type in there will be stored in the input field. we should get rid of the state of input field and only rely on the state object. we want to have single source of truth so convert "input" to “controlled element”. controlled elements do not have their own state, they get all data, via props and they notify changes to the data by raising events. we are using "value" prop to set inputs value. since input fields are initialized as empty strings, we will not be able to type something inside input field. solution is we have to handle the change event for input fields dynamically.

handlechange=e=>{
    const form={...this.state.form}
    form[e.currenttarget.name]=e.currenttarget.value
    this.setstate({account})}

<input value={this.state.form.username} change={this.handlechange} name="username"/>
<input value={this.state.form.password} change={this.handlechange} name="password" />

score:3

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

score:10

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.

score:16

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' );

score:34

for react 16, use following code. check this issue.

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");

Related Query

More Query from same tag