lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html lang="en">
  <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>
    <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>