title: React check radio button
body: <p>I have radio button inputs with an <code>onChange</code> callback that triggers a long action - a computation on the server. I want my input to update now to appear checked as soon as it is clicked, not only when the computation is finished - otherwise the user thinks he has not clicked right and keeps clicking. </p>
  
  <p>So I cannot set the "checked" attribute with props, otherwise it has to wait for the end of the computation. Calling <code>myinput.checked = "checked"</code> in the <code>inChange</code> callback does not update it either.</p>
  
  <p>My workaround is to write 10 ugly and stupid lines of code like theses ones so that a state updates first, and then we get the props at the end of the action:</p>
  
  <pre class="lang-js prettyprint-override"><code>getInitialState: function () {
      // "anti-pattern", according to the docs
      return {value: this.props.value};
  },
  
  componentWillReceiveProps: function(nextProps) {   
      // because we use the state in the &lt;input&gt;, it needs to mirror the props
      // when they change for another reason. I call it dirty.
      this.setState({value: nextProps.value});
  },
  
  onChange: function (e) {
      this.setState({value: e.target.value});   // to update it right now
      Actions.longAction(e.target.value);   // long action
  },
  
  render: function() {
      ...
      return &lt;input 
          ...
          type="radio"
          checked={ this.state.value === 1} 
      /&gt;;
  }
  </code></pre>
  
  <p>Is there any better way to check right away, visually, the option that the user clicked ?</p>