react 表单 全选 反选 全不选

var Forms = React.createClass({
    render : function(){
        var node = this.props.data.map(function(i){
                return (<CheckBox  checked={i.c} />);
        })
        
        return (
            <div id="checkbox">
                {node}
            </div>
            
        );
    }
 })

 var ButtonBox = React.createClass({
    render:function(){
        return (
            <div id="button">
                <ButtonA />
                <ButtonB />
                <ButtonC />
            </div>
        );
    }
    
 })


var Wrapper = React.createClass({
    render:function(){
        return (
            <div>
                <Forms data={this.props.data} />
                <ButtonBox />
            </div>
        );
    }
})

var CheckBox = React.createClass({

    componentWillMount:function(){
        this.pubsub_true = PubSub.subscribe('true', function(topic, product) {
            this.setTrue();
        }.bind(this));

        this.pubsub_false = PubSub.subscribe('false', function(topic, product) {
            this.setFalse();
        }.bind(this));

        this.pubsub_all = PubSub.subscribe('all', function(topic, product) {
            this.handleChange();
        }.bind(this));
    },

    componentWillUnmount: function() {
        PubSub.unsubscribe(this.pubsub_true);
        PubSub.unsubscribe(this.pubsub_false);
        PubSub.unsubscribe(this.pubsub_all);
    },
    getInitialState: function() {
        return {
            checked: this.props.checked
        };
    },
    render : function(){
        return (
            <div> 
                <input type="checkbox" onChange={this.handleChange} checked={this.state.checked} /> 
            </div>
        );
    },

    setTrue : function(){
        this.setState({
            checked: true
        });
    },

    setFalse :function(){
        this.setState({
            checked: false
        });
    },


    handleChange: function(){

        var state = this.state.checked;
        state = state ? false : true;
        this.setState({
            checked: state
        });
    }
})

var ButtonA = React.createClass({
    handleChange: function(){
        PubSub.publish('true');
    },

    render : function(){
        return (<input type="button" onClick={this.handleChange} id="a_xuan" value="全选"  />);
    }
})

var ButtonB = React.createClass({
    handleChange: function(){
        PubSub.publish('all');
    },
    render : function(){
        return (<input type="button" onClick={this.handleChange} id="a_xuan" value="反选"  />);
    }
})

var ButtonC = React.createClass({
    handleChange: function(){
        PubSub.publish('false');
    },
    render : function(){
        return (<input type="button" onClick={this.handleChange} id="a_xuan" value="全不选"  />);
    }
})

var formData = [
    {c:false},
    {c:false},
    {c:false},
    {c:true},
    {c:true}
]  


React.render(
    <Wrapper data={formData} />,
    document.body
);

　　组件通信依赖事件系统，需要自己实现或者第三方，这个版本用的是https://github.com/mroderick/PubSubJS