React实现组件间互斥点击

在实习的过程中，学着用React来搭建应用，也是第一次开始写工程代码的逻辑。

所以就在课余的时间就把这些东西总结一下，还需要更多付出才能让自己的技术更炉火纯青。

源码：ReactjsDemo/三组件互斥.html

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

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

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

getInitialState:function () {
            return{
                mutexBoolean1:false,mutexBoolean2:true,mutexBoolean3:false
            };
        },

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

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

checkedOrUn:function (mutexBoolean1) {
            if(mutexBoolean1){

            }else{
                $("input[name='Component1']").attr('checked',false);
            }
        },

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

componentWillReceiveProps:function (nextProps) {
            this.checkedOrUn(nextProps.mutexBoolean1);
        },componentDidMount:function () {
            this.checkedOrUn(this.props.mutexBoolean1);
        },

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!