react获取DOM节点
Posted 橙子的代码世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于react获取DOM节点的主要内容，如果未能解决你的问题，请参考以下文章
React 事件对象键盘事件表单事件ref获取dom节点react实现类似Vue双向数据绑定