????本文代碼基于React垢粮，Antd的Radio以及Radio.Group它呀，模擬的需求是：
????當有三個RadioGroup的時候坟桅，第一個RadioGroup的選擇值將改變后面兩個RadioGroup的狀態(tài)渣叛，當?shù)谝粋€RadioGroup選擇為1時班眯，其他兩個RadioGroup將不能使用（通過disabled來控制）希停。我們可以通過使用回調(diào)函數(shù)來完成這一需求：
- 首先是父組件有一個相對于三個子組件的全局的值isEnabled，這個值表示第二署隘、第三個子組件是否可以使用宠能，因此需要將isEnabled傳給這兩個子組件；
- 父組件提供一個changeEnabled方法接受一個value參數(shù)磁餐，根據(jù)這個參數(shù)违崇，來更改isEnabled值（value為1，則為false诊霹，否則為true）羞延。這個方法就是給子組件調(diào)用的，回調(diào)函數(shù)畅哑，將由父組件傳給第一個子組件肴楷；
- 第一個子組件通過調(diào)用與RadioGroup的onClick綁定的方法handleChange，來更新它本身的value值荠呐，同時回調(diào)方法changeEnabled赛蔫，并傳入更新的value值；
- 父組件的changeEnabled被調(diào)用后泥张，根據(jù)value值呵恢，及時更新自己的isEnabled值，以更改第二媚创、第三個子組件狀態(tài)渗钉。
- 在子組件中請注意render()方法中的這一行代碼：const {isEnabled} = this.props，而不是將isEnabled放到子組件的constructor(props)。
總結：核心思想鳄橘，即父組件擁有某個狀態(tài)變量声离，也擁有更新這個狀態(tài)變量的函數(shù)，父組件把這個函數(shù)傳遞給子組件瘫怜，然后通過子組件的調(diào)用來更新這個狀態(tài)變量术徊。
????本人是剛剛入門React不久的新手拒炎，語言組織也可能有些混亂邑狸。如有問題馒铃，請大神多多指教砾肺。
完整代碼如下：
其中，
- Radios是存放一個RadioGroup的子組件膛薛，RadioGroups是父組件寂屏，存放三個Radios词顾。
- 子組件中render()方法的這一行代碼 const {isEnabled} = this.props; 尤其重要炸裆，它能夠及時接收父組件的isEnabled值的變化而更新自己的RadioGroup狀態(tài)垃它。但此處筆者有個問題是，為何不能將isEnabled放到constructor里面晒衩，作為子組件本身的state值嗤瞎，希望有高手能夠指點一下。
//RadioGroups
import React, {Component} from 'react';
import {Radio} from 'antd';
const RadioGroup = Radio.Group;
class Radios extends Component{
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
value : 1, //RadioGroup初始化值為1听系，表示選擇第一個選項
};
}
handleChange(e){
this.setState({
value : e.target.value,
});
console.log('value: ' + e.target.value + ' ' + this.props.changeEnabled);
// 子組件更新RadioGroup值的同時，回調(diào)父組件的changeEnabled方法以更新其isEnabled值虹菲，
// 如果方法為undefined靠胜，說明不是第一個RadioGroup
if(this.props.changeEnabled !== undefined){
this.props.changeEnabled(e.target.value);
console.log('changed');
}
}
render(){
//接收父組件傳進來的isEnabled值，以更新子組件的狀態(tài)（對應下面RadioGroup的disabled狀態(tài)）
const {isEnabled} = this.props;
return (
<div>
{/*disabled值根據(jù)父組件的isEnabled改變而改變毕源，如果為undefined浪漠，說明是第一個Radio組，不會隨著父組件的isEnabled改變霎褐。*/}
<RadioGroup disabled={!isEnabled} value={this.state.value} onChange={this.handleChange}>
<Radio value={1}>1</Radio>
<Radio value={2}>2</Radio>
<Radio value={3}>3</Radio>
</RadioGroup>
</div>
);
}
}
class RadioGroups extends Component{
constructor(props){
super(props);
this.changeEnabled = this.changeEnabled.bind(this);
this.state = {
isEnabled: false,
};
}
//父組件中的回調(diào)函數(shù)（給子組件調(diào)用）
changeEnabled(value){
this.setState({
isEnabled : value !== 1
});
console.log(this.state.isEnabled)
}
render(){
return (
<div>
{/*只將回調(diào)方法傳給第一個組件址愿，這樣其他兩個組件的值將不影響父組件的state*/}
{/*而isEnabled第一個組件保持為true，以保證其一直可以使用*/}
<Radios isEnabled={true} changeEnabled={this.changeEnabled}/>
<Radios isEnabled={this.state.isEnabled}/>
<Radios isEnabled={this.state.isEnabled}/>
</div>
);
}
}
export default RadioGroups;
本文須知的坑：
????1. 一定要學習好React的生命周期冻璃，其中每個組件的constructor只會調(diào)用一次响谓，因此必須將要更新的值放到render方法里面而不是constructor里面，如Radios組件中render()方法里的const {isEnabled} = this.props;
