React实例3-状态2

weixin_30339969

于 2017-05-13 23:18:00 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/codepen2010/p/6850865.html

本文介绍了一个简单的React点击计数器应用实现方法。通过使用React的`createClass`来定义组件，并利用`getInitialState`初始化状态，通过`setState`更新状态来实现点击次数的累加。该示例还展示了如何将当前点击次数显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>state2</title>
<script src="build/browser.min.js"></script>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/babel">
var ClickApp = React.createClass({
getInitialState:function(){
return {
clickCount:0,
};
},
handleClick:function(){
this.setState({
clickCount:this.state.clickCount+1,
});
},
render:function(){
return (
<div>
<h2>点击下面按钮</h2>
<button onClick={this.handleClick}>点击我</button>
<p>你一共点击了：{this.state.clickCount}</p>
</div>
);
}
});

ReactDOM.render(<ClickApp/>,
document.getElementById('app'),
function(){
console.log('渲染完成啦')
});
</script>
</head>