title: React - Cannot dispatch onChange event from input text element programatically
body: <p>I have two components: <code>ParentComponent</code> and <code>ChildComponent</code>.</p>
  
  <p>The <code>ChildComponent</code> has an <code>input[type="text"]</code> element that when it changes its text that event is propagated to the <code>ParentComponent</code> through the event <code>change</code> and the <code>onChange</code> listener.</p>
  
  <p>The code below is a simplification of a bigger problem, that's why you will see some requirements highlighted there.</p>
  
  <p><strong>My problem is</strong> that I need to trigger the <code>change</code> event inside the function: <code>handleClick</code>. I did some experiments with no luck.</p>
  
  <p>Here you have the <strong>code sandbox</strong> you can experiment with (please provide a fork with your approach):</p>
  
  <p><a href="https://codesandbox.io/s/wqw49j5krw" rel="nofollow noreferrer">https://codesandbox.io/s/wqw49j5krw</a></p>
  
  <p>Here you have the code:</p>
  
  <p><strong>ParentComponent.js</strong></p>
  
  <pre><code>import React from "react";
  import ChildComponent from "./ChildComponent";
  
  export default class ParentComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: "Peter"
      };
    }
    handleChange = event =&gt; {
      let target = event.target;
      let value = target.value;
      this.setState({
        name: value
      });
    };
    render() {
      return (
        &lt;div&gt;
          &lt;ChildComponent value={this.state.name} onChange={this.handleChange} /&gt;&lt;br /&gt;
          &lt;span&gt;Hello&lt;/span&gt;&amp;nbsp;
          &lt;span&gt;{this.state.name}!&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>ChildComponent.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  export default class ChildComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: this.props.value
      };
    }
    handleChange = event =&gt; {
      const name = event.target.value;
      this.setState({ value: name });
      if (this.props.onChange !== undefined) {
        this.props.onChange(event);
      }
    };
    handleClick = name =&gt; {
      const inputName = this.refs.name;
      console.log('Name before being changed: ' + inputName.value); // this works
      // PROBABLY HERE IS WHERE THE CODE NEEDS TO BE MODIFIED
      this.setState({ value: name });
      var event = new Event('input', { bubbles: true });
      inputName.dispatchEvent(event); // this doesn't propagate the event to the parent
    };
    render() {
      return (
        &lt;div&gt;
          {"Your name: "}
          &lt;input type="text"
            value={this.state.value}
            onChange={this.handleChange}
            ref="name"
          /&gt;
          {/* requirement: the following 2 lines cannot be modified */}
          &lt;button onClick={e =&gt; { this.handleClick("Steve"); }}&gt;Steve&lt;/button&gt;
          &lt;button onClick={e =&gt; { this.handleClick("Emily"); }}&gt;Emily&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Any idea on how to get this working?</p>
  
  <p>Thanks!</p>