title: React - setting input value with JavaScript does not trigger 'onChange'
body: <p>In my React app (version 15.4.2), I am updating the value of a text input field with JavaScript - however, I have an <code>onChange</code> event listener associated with the input field, and changing the value of the input field does not trigger the handler (good old fashioned typing in the input field does, of course), though the content of the field is correctly updated.</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.onChange = this.onChange.bind(this);
  }
  
  onChange(event){
      let attribute = event.target.name;
      let updatedGroup = this.state.group;
      updatedGroup[attribute] = event.target.value;
      this.setState({group: updatedGroup});
  }
  
  addMember(memberId) {
      let inputField = document.getElementById("members");
      let inputValues = inputField.value.split(",");
      inputField.value = [...inputValues, memberId];
  }
  
  render(){
      &lt;input type="text" id="members" name="members" value={this.state.group.members} onChange={this.onChange} /&gt;
  }
  </code></pre>
  
  <p>So when <code>addMember()</code> is called (via button click in a child component), then content of the input field itself is correctly updated, but onChange is not called and thus the state is not updated, etc...</p>
  
  <p>Is there a way that I can programatically set the value of the input field and trigger <code>onChange</code>?</p>