<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="container">
<script type="text/babel">
var TestClickComponnet = React.createClass({
//使用实例属性去给监听的时间
handleClick:function (event) {
// body...
//var tipE = React.findDOMNode(this.refs.tip);
var tipE = this.refs.tip
if(tipE.style.display === 'none'){
this.style.display = 'inline';
}else{
tipE.style.display = 'none';
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<button onClick={this.handleClick}>显示 | 隐藏 </button><span>测试点击</span>
</div>
);
}
});
var TestInputComponent = React.createClass({ //存储//存储用户输出的内容用户输出的内容
getInitialState:function(){
return {
inputContent: ''
}
},
changeHandler: function(event){
//event.target 属性可以用来实现事件委托 (event delegation)。
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>
);
}
});
ReactDOM.render(
<div>
<TestClickComponnet/>
<TestInputComponent/>
</div>,
document.getElementById('container'));
</script>
</div>
</body>
</html>
