title: How To: onClick/onChange for a <select>'s <option> in a child component
body: <p>Is there a way to have a child component which rendered only an <code>&lt;option&gt;</code> tag to trigger the <code>onChange</code> of it's parent <code>&lt;select&gt;</code> ?</p>
  
  <p>I ask because I've tried <code>onClick</code> and <code>onChange</code> on the the child <code>&lt;option&gt;</code> and it seems to be aloof to them.</p>
  
  <p>The idea is a parent React component that looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
    return (
      &lt;select value={this.state.value} onChange={this.handleChange}&gt;
        &lt;ChildOption onClick={this.handleChange}
      &lt;/select&gt;
    );
  }
  </code></pre>
  
  <p>and the ChildOption component like this: </p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
    return (
      &lt;option onClick={this.handleClick} /&gt;
    );
  }
  </code></pre>
  
  <p>The full code for this issue is here in a CodePen (pretend it's returning an array of <code>&lt;option&gt;</code>s: </p>
  
  <ul>
  <li><a href="http://codepen.io/mikeumus/pen/BpzeYO?editors=0010" rel="nofollow noreferrer">http://codepen.io/mikeumus/pen/BpzeYO?editors=0010</a></li>
  </ul>
  
  <p>Real world code here in Cloud9:</p>
  
  <ul>
  <li><a href="https://ide.c9.io/mikeumus/ca-blinds#imports/plugins/included/product-detail-simple/client/components/variantList.js:205" rel="nofollow noreferrer">https://ide.c9.io/mikeumus/ca-blinds#imports/plugins/included/product-detail-simple/client/components/variantList.js:205</a></li>
  </ul>