|
|
@@ -1,16 +1,57 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>Document</title>
|
|
|
<script src="./babel.min.js"></script>
|
|
|
<script src="./react.development.js"></script>
|
|
|
<script src="./react-dom.development.js"></script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
<div id="root"></div>
|
|
|
<script type="text/babel">
|
|
|
+ // 类组件 state 可以修改数据
|
|
|
+ // 计数器
|
|
|
+ class White extends React.Component {
|
|
|
+ // 定义初始数值
|
|
|
+ state = {
|
|
|
+ title: "计数器",
|
|
|
+ count: 0,
|
|
|
+ };
|
|
|
+ // constructor() {
|
|
|
+ // super(props),
|
|
|
+ // state={
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // 数据更新视图未变
|
|
|
+ // vue解决方案：Vue.set() this.$set
|
|
|
+ // react解决方案:
|
|
|
+ handleAdd() {
|
|
|
+ this.setState({
|
|
|
+ count: this.state.count + 1,
|
|
|
+ });
|
|
|
+ console.log(this.state, "加法");
|
|
|
+ }
|
|
|
+ handleReduce = () => {
|
|
|
+ console.log(this)
|
|
|
+ this.setState({
|
|
|
+ count: this.state.count - 1,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h2>{this.state.title}</h2>
|
|
|
+ <p>当前数值:{this.state.count}</p>
|
|
|
+ <button onClick={this.handleAdd.bind(this)}>+</button>
|
|
|
+ <button onClick={this.handleReduce}>-</button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let element = <White />;
|
|
|
+ ReactDOM.createRoot(document.querySelector("#root")).render(element);
|
|
|
</script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+ </body>
|
|
|
+</html>
|
e