Trigger change events when the value of an input is changed programmatically

[dahlke]

When I bind an event to an input using onChange and then change the value of the input programmatically, a change event is not fired.

Example:

<input type="text" onChange={this.on_change} ref="test_input"/>

Changing the input with:

var input = this.refs.test_input.getDOMNode();
input.value = "";

Does not result in a triggering of on_change. This has to be done manually, like so:

this.on_change(args);

[sophiebits]

Correct, this mirrors how events are fired outside of React and is expected. Having value changes trigger a change event is a good way to make an infinite loop -- if you want to call the change handler you should do so manually, as you mentioned.

[norfish]

what about manually call setState after change the input value by input.value = "";

maybe I want this

<input type="text" onChange={this.onChange} ref="test_input"/>

onChange: function(e){
  this.setState({value: e.target.value});
},

manaulChange: function(val){
  var input = this.refs.test_input.getDOMNode();
  input.value = val;
  this.setState({value: val});
}

[dminkovsky]

So, fwiw, my first attempt at solving this issue given a 3rd party component that I don't want to neither modify nor reach too deeply in to, has been to use http://facebook.github.io/react/docs/test-utils.html#simulate. Not sure how much this is adding to my Webpack bundle.

[stiofand]

I have a generic form action that saves the values of a form to state when they are changed. However, I have an option to save the details in localStorage so next time a user goes to the form its pre-filled. However, it seems using ReactDOM to pre-fill the values from storage doesn't trigger the onChange Event and my state isn't updated, and thus submitting a form fails with blank values.
Is there anyway around this?

[nhunzaker]

@stevematdavies onChange does not fire when React gives an input a new value, but I might have your use case wrong. Would you be willing to provide an example?

[stiofand]

I have redux action which saves user login credentials to localStorage when a check box is checked. If the user logs out, and returns to the log in page.

The values themselves are read into the forms state when the user enters them into the fields by using the onChange event of each field. I did it this way as I have many forms basically the same except for the form name. so I use one parent ApplicationForm component form which has a function:

 onFormValuesChange(e) {
    let formFieldName, formFieldValue, firstChar;
    e.preventDefault();
    formFieldName = e.target.name;
    formFieldValue = e.target.value;
    firstChar = formFieldName.charAt(0);
    if (firstChar !== '$') {
      this.setState({
        [formFieldName]: formFieldValue
      });
    }
  }

the $ is so I can avoid setting state values for selected fields if necessary.

Thus to use this common functionality, I just drop my child forms in to the ApplicationForm as its children (rendered by this.props.children) Thus any field inside this ApplicationForm will be harvested with onChange, including other items such as checkboxes, reCaptchas etc

The issue is, when a value is entered into any field via storage, or programmatically eg getting them from localStorage), the onChange event is not fired (as you mentioned) and thus the values are not added to state, and when submit is fired they are all undefined.

Of course I could circumvent this with parsing the values on submit, however, this means I would have to ensure I know the names of all the fields of all the child forms, and ensure they are all unique. This is just silly replication, and not abstract enough for our coding standards.

[skarunakar]

@dahlke How did you solve this?? I have raised a similar question in stackoverflow
https://stackoverflow.com/questions/49632220/unable-to-dispatch-onchange-which-is-a-handler-of-input-in-a-react-component