title: React radio button onChange event does not bind on first change of radio button
body: <p>I am working with react js and found a weird issue on radio button <code>onChange</code> event binding. 
  My page opens a popup on button click where a new component bind inside that popup. In this new component I have created 2 <code>radio buttons</code> and on change of that radio buttons I'm hide/show div. below is my code.</p>
  
  <pre><code> class component1 extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showComponent: true
     };
    }
    handleChange = () =&gt; {
      this.setState({
        showComponent: !this.state.showComponent,
      });
    }
    render() {
     return(
     &lt;div&gt;
      &lt;input type='radio' name='a' onChange={self.handleChange} defaultChecked/&gt;
      &lt;input type='radio' name='a' onChange={self.handleChange}/&gt;
       {this.state.showComponent &amp;&amp; (&lt;div&gt;Hide or show based on state change&lt;/div&gt;)}
     &lt;/div&gt;
    );
   }
  }
  </code></pre>
  
  <p>When I open the popup for the first time it works fine. Perhaps its behavior change after submitting form and popup close. When next time I open popup without parent page refresh, on first change of radio button it does not call <code>handleChange</code> function. And from the second click it just works fine. </p>
  
  <p>I think, <code>onSubmit</code> I have called <code>form.reset()</code> function on successful submission of form, which is creating problem. But i don't understand how to resolve this issue.</p>