React实现组件间互斥点击

组件间互斥就是利用了一个父组件中的各个子组件的state来改变组件的checked属性来实现选中是否有效。

以上的源码以三个组件为例，大致的思路就是，有一个父组件Component中有3个子组件分别命名Component1、Component2、Component3。

然后在父组件中getInitialState设置三个子组件的mutexBoolean，

如果值为真，说明被选中，此组件可用；如果值为假，说明其他组件被选中，则此组件上一次此组件的选择情况被清空，只保留值为真的组件选择情况。

然后再通过子组件每个input元素的点击事件调用父组件里的handleCheck函数来setState改变mutexBoolean。（因为demo中的input比较少，如果很多的话可以用事件代理来添加onChange事件。

改变mutexBoolean了之后，在componentWillReceiveProps和componentDidMount中调用每个子组件自有的checkedOrUn函数来设置每个子组件的checked属性。

从而达到控制三个组件之间互斥的关系。