組件間互斥就是利用了一個(gè)父組件中的各個(gè)子組件的state來(lái)改變組件的checked屬性來(lái)實(shí)現(xiàn)選中是否有效。
以上的源碼以三個(gè)組件為例乓梨,大致的思路就是,有一個(gè)父組件Component中有3個(gè)子組件分別命名Component1、Component2傲醉、Component3。
然后在父組件中getInitialState設(shè)置三個(gè)子組件的mutexBoolean呻率,
如果值為真硬毕,說(shuō)明被選中,此組件可用礼仗;如果值為假吐咳,說(shuō)明其他組件被選中,則此組件上一次此組件的選擇情況被清空元践,只保留值為真的組件選擇情況韭脊。
然后再通過(guò)子組件每個(gè)input元素的點(diǎn)擊事件調(diào)用父組件里的handleCheck函數(shù)來(lái)setState改變mutexBoolean。(因?yàn)閐emo中的input比較少单旁,如果很多的話可以用事件代理來(lái)添加onChange事件沪羔。
改變mutexBoolean了之后,在componentWillReceiveProps和componentDidMount中調(diào)用每個(gè)子組件自有的checkedOrUn函數(shù)來(lái)設(shè)置每個(gè)子組件的checked屬性象浑。
從而達(dá)到控制三個(gè)組件之間互斥的關(guān)系蔫饰。