react获取DOM节点

<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<!--LikeButton组件,getInitialstate方法用于定义初始状态,这个对象可以通过this.state属性读取当用户点击组件,导致状态变化,this.setState方法就修改状态值
React组件支持很多事件,除了Click KeyDown copy scroll事件
-->
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState:function(){
return {liked:false};
},
handleClick:function(event){
this.setState({liked: !this.state.liked});
},
render:function(){
var text = this.state.liked ? 'like' : 'have\'t liked';
return(
<div>
<p onClick={this.handleClick}>
Click to toggle.
</p>
<p>
You {text} this.
</p>
</div>
)
}
});
ReactDOM.render(
<LikeButton/>,
document.getElementById('example')
);

</script>
</body>
</html>

posted @ 2017-06-29 15:29  橙子的代码世界  阅读(1069)  评论(0编辑  收藏  举报