React.js - How to check the radio correctlly - reactjs

Question

There is a litter bug like this:
There are three radioGroup , we call it A , B, C.
A:Has 2 radios ,it will control to render B or render C.
B:Has 4 radios,default B-1(the first radio of B)
C:Has 10 radios,default C-1(this first radio of C)
when I choose A-1,the B is rendered,the default is B-1.
Then I choose B-2,then I choose A-2.
The Error come out,I found the C-2 is Checked!
But I didn`t click the C-2 at all.
So Why this happened? How could I fixed it?
class Tanx extends React.Component{
constructor() {
super();
this.subMit = this.subMit.bind(this);
this.setData = this.setData.bind(this);
this.setGreatspec = this.setGreatspec.bind(this);
this.setPlatform = this.setPlatform.bind(this);
this.state = {
platform:"PC",
create_spec:"99",
ad:null
};
}
setGreatspec(val) {
this.setState({
create_spec:val
})
}
setPlatform(val) {
console.log(this);
this.setState({
platform:val
});
}
setData(val){
this.setState({
ad:val
})
}
subMit() {
let create_spec = this.state.create_spec;
let platform = this.state.platform;
let self = this;
console.log(this.state);
// $.ajax({
// url:"/req/gdt/"+platform+"/"+create_spec,
// type:'get',
// success:function(res){
// // var ad = res.msg&&res.msg.seatbid[0].bid[0];
// var ad = res.msg
// self.setData(ad);
// console.log(res);
// },
// error:function(err){
// console.log(err);
// }
// })
}
render() {
var ad = this.state.ad;
if(ad){
var ad_html = (<div className="col-lg-4">
<pre style={{background:"#eee",padding:"10px",maxHeight:"500px",overflow:"scroll"}}>
<code style={{color:"green",fontSize:"14px"}}>
{JSON.stringify(ad,null,"\t")}
</code>
</pre>
</div>);
}else{
var ad_html = "";
}
var platform = this.state.platform;
if(platform==='PC'){
var radio_box = <RadioBox titles={['99','23','12','2']} name="create_spec_moblie" getVal={this.setGreatspec} />
}else{
var radio_box = <RadioBox titles={['80','207','208','212','147','148','149','150','79','58','59','70','113','114','10','28','31','35','69','65','133','134']} name="create_spec_moblie" getVal={this.setGreatspec} />
}
return(
<div className="row">
<div className="col-lg-3">
<FormGroup name="Platform">
<RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
</FormGroup>
<FormGroup name="Create_spec">
{radio_box}
</FormGroup>
<button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
</div>
{ad_html}
</div>
)
}
}

Answer 1

You need to understand the React internals for this. React needs a way to identify the "uniqueness" of a component. In your example you're using RadioBox with the same name and injecting in the parent component output. In the end, what react sees is quite the same markup but with only the titles property beeing changed, so internally, React will only change the props passed to the component (using the same component whatsoever).
So, in the end your component outputs one of the following markups:
<div className="row">
<div className="col-lg-3">
<FormGroup name="Platform">
<RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
</FormGroup>
<FormGroup name="Create_spec">
<RadioBox titles={['99','23','12','2']} name="create_spec_moblie" getVal={this.setGreatspec} />
</FormGroup>
<button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
</div>
<AdHTML here... />
</div>
or
<div className="row">
<div className="col-lg-3">
<FormGroup name="Platform">
<RadioBox titles={['PC','Mobile']} name="platform" getVal={this.setPlatform} />
</FormGroup>
<FormGroup name="Create_spec">
<RadioBox titles={['80','207','208','212','147','148','149','150','79','58','59','70','113','114','10','28','31','35','69','65','133','134']} name="create_spec_moblie" getVal={this.setGreatspec} />
</FormGroup>
<button className="btn btn-info btn-lg" onClick={this.subMit}>Submit</button>
</div>
<AdHTML here... />
</div>
As you can see, either version you choose, the difference is the titles attribute passed to the second RadioBox component. i.e. titles={[a, different, set, of, titles]}
So what the library determines in this case is that you're using the same RadioBox component with a slight change - i.e. title - and uses the same cached component and re-renders it with the different parameter. The internal state of the component, thus, remains unchanged.
But you actually need the same component being rendered uniquely for each of your cases. So you have to pass an id parameter in each case, and (maybe) remove the name attribute since it's completely useless.
So in each of your case you have to pass an id parameter that should be unique.
<RadioBox title={[B, checkbox, titles]} id="b-checkbox" />
and
<RadioBox title={[C, checkbox, titles]} id="c-checkbox" />