1、问题背景
点击按钮,记录点击次数
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React记录按钮点击次数</title>
<link rel="stylesheet" href="../css/base.css" />
<script type="text/javascript" src="../js/react.js" ></script>
<script type="text/javascript" src="../js/react-dom.js" ></script>
<script type="text/javascript" src="../js/browser.min.js" ></script>
<script type="text/babel">
var BtnCounter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handlerClick: function () {
this.setState({
count: this.state.count + 1,
});
},
render: function () {
return (
<button onClick={this.handlerClick}>
点击: {this.state.count}
</button>
);
}
});
ReactDOM.render(
<BtnCounter />,
document.getElementById("divContainer")
);
</script>
</head>
<body>
<div id="divContainer" style="cursor: pointer;">
点击我!
</div>
</body>
</html>
3、实现结果
4、注意事项
(1)编写js中的type是"text/babel"
(2)函数BtnCounter首字母大写