React check radio button - reactjs

Question

I have radio button inputs with an onChange 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.
So I cannot set the "checked" attribute with props, otherwise it has to wait for the end of the computation. Calling myinput.checked = "checked" in the inChange callback does not update it either.
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:
getInitialState: function () {
// "anti-pattern", according to the docs
return {value: this.props.value};
},
componentWillReceiveProps: function(nextProps) {
// because we use the state in the <input>, 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 <input
...
type="radio"
checked={ this.state.value === 1}
/>;
}
Is there any better way to check right away, visually, the option that the user clicked ?

Answer 1

In React, don't read DOM.
Instead, manage checked in you Checkbox component. Since checkbox only holds boolean value (checked), it's super easy. On every change, you invert this value and call onChange handler.
See this structure, feel free to edit it to your needs.
var Parent = React.createClass({
getInitialState() {
return {
checked: false,
}
},
onChange(checked) {
this.setState({ checked });
},
render: function() {
return <Checkbox checked={this.state.checked} onChange={this.onChange} />;
}
});
var Checkbox = React.createClass({
onChange() {
this.props.onChange(!this.props.checked);
},
render() {
const props = {
...this.props,
onChange: this.onChange,
};
return <input type="checkbox" {...props} />;
}
});
Working fiddle: https://jsfiddle.net/69z2wepo/37640/