title: React 17: set input value and trigger onChange
body: <p>When I change the value in an input, it can triggers onChange.
  When I click the button, it updates the value in state.
  Another component(an input) render again since state updated, it refresh on screen, but the onChange has not trigger.</p>
  <p>There are some solutions but I found that they are not working on React 17.</p>
  <p>I hope it will show</p>
  <pre><code>handleClick  &lt;input id=​&quot;wav&quot; value=​&quot;new value&quot;&gt;​
  handleChange triggered
  </code></pre>
  <p>In deed, it can only show.</p>
  <pre><code>handleClick  &lt;input id=​&quot;wav&quot; value=​&quot;new value&quot;&gt;​
  </code></pre>
  <p>Some people suggest trigger onChange manually, but I don't know how to create a synthetic event.
  like calling handleChange(eventOnChange) in onClick(eventClick), but how can I create the real &quot;eventOnChange&quot;, eg for formik.</p>
  <p>Ref: <a href="https://stackoverflow.com/questions/42550341/react-trigger-onchange-if-input-value-is-changing-by-state">React: trigger onChange if input value is changing by state?</a></p>
  <pre><code>class TestTriggerOnChange extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        value: 'original value'
      }
    }
    handleChange (e) {
      console.log('handleChange triggered')
    }
    handleClick () {
      console.log('handleClick ', this.myinput)
  
      this.setState({value: 'new value'})
      var event = new Event('input', { bubbles: true });
      this.myinput.dispatchEvent(event);
    }
    render () {
      return (
        &lt;div&gt;
          &lt;input id='wav' value={this.state.value}  onChange={(e) =&gt; {this.handleChange(e)}} ref={(input)=&gt; this.myinput = input}/&gt;
          &lt;button onClick={this.handleClick.bind(this)}&gt;Change Input&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p>package I used</p>
  <pre><code>    &quot;react&quot;: &quot;^17.0.0&quot;,
      &quot;react-animation-components&quot;: &quot;^3.0.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-popper&quot;: &quot;^2.2.4&quot;,
      &quot;react-redux&quot;: &quot;^7.2.2&quot;,
      &quot;react-redux-form&quot;: &quot;^1.16.14&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;^4.0.1&quot;,
      &quot;react-transition-group&quot;: &quot;^4.4.1&quot;,
      &quot;reactstrap&quot;: &quot;^8.8.1&quot;,
      &quot;redux&quot;: &quot;3.7.2&quot;,
      &quot;redux-logger&quot;: &quot;3.0.6&quot;,
      &quot;redux-thunk&quot;: &quot;2.2.0&quot;,
  </code></pre>