React初识（按钮点击+输入绑定）
简单按钮点击事件：
<!DOCTYPE html>
<html>
<head>
<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="example"></div>
<!-- 区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，
以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。 -->
<script type="text/babel">
var HelloMessage=React.createClass({
handClick:function(event){
<!-- 获取真实DOM ReactDOM.findDOMNode函数 -->
var tipE=ReactDOM.findDOMNode(this.refs.tip)
if(tipE.style.display==="none"){
tipE.style.display="inline"
}else{
tipE.style.display="none"
}
<!-- 将停止事件的传播 -->
event.stopPropagation()
<!-- 阻止元素发生默认的行为 -->
event.preventDefault()
},
render: function(){
return (
<div>
<button onClick={this.handClick}>显示|隐藏</button>
<span ref="tip">测试点击</span>
</div>
)
}
});
<!-- ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，
一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。
更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，
并将其移动到一个更合适的存储库。 -->
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
输入框的绑定简单实现
<!DOCTYPE html>
<html>
<head>
<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="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass({
getInitialState:function(){
return {
contentText:''
}
},
changContent:function(event){
this.setState({
contentText: event.target.value
})
event.stopPropagation()
event.preventDefault()
},
render: function(){
return (
<form>
<input type="text" placeholder="说点什么吧" onChange={this.changContent} />
<p>{this.state.contentText}</p>
</form>
)
},
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
