Trigger onchange event with React - componentDidMount not working

Question

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:

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 (
      <select className={this.props.className} onChange={this.onChange} ref='dropdown'>
        {this.props.options.map(function(option){
          return (
              <Option value={option.value} key={option.value}>{option.label}</Option>
            );
        })}
    </select>
    );
  }
});

And then calling document.querySelector("select.header").onchange; just in the console of my page, and nothing happens. Thoughts?

Answer 1

Found an answer. For some reason I was able to trigger it with jQuery $("select.header").change(); but not document.querySelector("select.header").onchange();

No idea why, but at least I found a solution.