title: How do I programmatically trigger <select> onChange in React component with plain DOM Javascript?
body: <p>I have a simple React component:</p>
  
  <pre><code>state = {
    value: '',
  };
  
  render() {
    return &lt;select onChange={this.handleChange} value={this.state.value}&gt;
      &lt;option value=""&gt;--&lt;/option&gt;
      &lt;option value="1"&gt;One&lt;/option&gt;
    &lt;/select&gt;;
  }
  
  handleChange = (e) =&gt; {
    this.setState({
      value: e.target.value,
    });
    console.log('Handling Change!!')
  };
  </code></pre>
  
  <p>I want to be able to trigger the event handler <em>programmatically</em> via ordinary javascript or, in this example, jQuery. </p>
  
  <pre><code>$select = $('select');
  $select.val('1');
  // then
  $select.trigger('change');
  // or
  $select.trigger('input');
  </code></pre>
  
  <p>But none of these trigger the <code>onChange</code> handler in the React component, and therefore the state doesn't get updated.</p>
  
  <p>My question: How can I trigger the <code>onChange</code> handler using the DOM and Javascript?</p>
  
  <p><strong>[edit]</strong></p>
  
  <p>To clarify a bit further, I am mounting the React Component like this:</p>
  
  <pre><code>el = document.createElement('div')
  ReactDOM.render(MySelect, el)
  
  $select = $(el).find('select');
  $select.val('1');
  // then
  $select.trigger('change');
  // or
  $select.trigger('input');
  </code></pre>