title: Trigger onchange event with React - componentDidMount not working
body: <p>I have a page with a bunch of react generated dropdowns that do specific actions when an option is selected. They work fine using their own 'onChange' methods, but I want to find a way to trigger them from an outside function too. I tried doing: </p>
  
  <pre><code>var Dropdown = React.createClass({
    getInitialState: function () {
      return{firstTime: true};
    },
    onChange: function(event){
      if (this.state.firstTime===true) {
        if (typeof this.props.onChange === 'function') {
          this.props.onChange(event.target, true);
      }
    }
    else {
      if (typeof this.props.onChange === 'function') {
          this.props.onChange(event.target, false);
      }
    }
      this.setState({firstTime: false});
    },
    componentDidMount: function() {
      var dropdown = this.refs.dropdown;
      dropdown.addEventListener('change', this.onChange, false);
    },
    render: function() {
      return (
        &lt;select className={this.props.className} onChange={this.onChange} ref='dropdown'&gt;
          {this.props.options.map(function(option){
            return (
                &lt;Option value={option.value} key={option.value}&gt;{option.label}&lt;/Option&gt;
              );
          })}
      &lt;/select&gt;
      );
    }
  });
  </code></pre>
  
  <p>And then calling document.querySelector("select.header").onchange; just in the console of my page, and nothing happens. Thoughts?</p>