title: onChange callback not firing in React component
body: <p>My <code>onChange()</code> function does not run unless I use jQuery for some reason. The reason why I have to add the <code>onChange</code> listener in <code>componentDidMount()</code> is because I'm using MaterializeCSS which transforms your <code>select</code> tag into a <code>ul</code>. The code below works fine:</p>
  
  <pre><code>onChange(e) {
    let inspectionTime = e.target.value;
    this.setState({ inspectionTime });
  }
  
  componentDidMount() {
    let $inspectionDropdown = $(ReactDOM.findDOMNode(this.refs.inspection));
    $inspectionDropdown.on('change', this.onChange);
  }
  </code></pre>
  
  <p>but this code does not:</p>
  
  <pre><code>onChange(e) {
    let inspectionTime = e.target.value;
    this.setState({ inspectionTime });
  }
  
  componentDidMount() {
    let inspectionDropdown = ReactDOM.findDOMNode(this.refs.inspection);
    inspectionDropdown.addEventListener('change', this.onChange);
  }
  </code></pre>
  
  <p>Here is the code for the whole component if it helps at all:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class InspectionMode extends React.Component {
    constructor(props) {
      super(props);
      this.onChange = this.onChange.bind(this);
      this.defaultValue = 'selected';
      this.state = { inspectionTime: 0 };
    }
  
    onChange(e) {
      let inspectionTime = e.target.value;
      this.setState({ inspectionTime });
    }
  
    componentDidMount() {
      let inspectionDropdown = ReactDOM.findDOMNode(this.refs.inspection);
      inspectionDropdown.addEventListener('change', this.onChange);
    }
  
    render() {
      let classes = 'input-field col s10 offset-s1 l3';
  
      return (
        &lt;div className={classes}&gt;
          &lt;select onChange={this.onChange} ref="inspection" value={this.state.inspectionTime}&gt;
            &lt;option value="0"&gt;None&lt;/option&gt;
            &lt;option value='5'&gt;5 Seconds&lt;/option&gt;
            &lt;option value='10'&gt;10 Seconds&lt;/option&gt;
            &lt;option value='15'&gt;15 Seconds&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;Inspection Time&lt;/label&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default InspectionMode;
  </code></pre>