var TestClickComponent = React.creatsClass({
handleClick: function(event){
//操作DOM节点
var msg = React.findDOMNode(this.refs.tip);
if(msg.style.display === 'none'){
msg.style.display = 'inline';
}else{
msg.style.display = 'none';
}
//阻止事件的冒泡和默认行为
event.stopPropagation();
event.preventDefault();
},
render: function(){
return(
<div>
<button onClick={this.handleClick}>显示/隐藏</button>
<span ref="tip">message</span>
</div>
);
}
});
var TestInputComponent = React.createClass({
getInitialState: function(){
return{
inputContent: ' '
}
},
changeHandler:function(event){
//改变state的值
this.setState({
inputContent:event,target.value
});
event.preventDefault();
event.stopPropagation();
},
render: function(){
return(
<div>
<input type="text" onChange={this.changeHandler}/>
<span>{this.state.inputContent}</span>
</div>
);
}
});
