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