lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="./babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="./react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="./react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      let root = ReactDOM.createRoot(document.getElementById("root"));
      /**
       * 1.监听器this 实际开发 类组件中
       * 2.类组件 绑定事件 this.xxx 此时 this指向undefined
       * 3.修改this指向：bind apply call
       */
      function News() {
        return (
          <button
            onClick={() => {
              let flower = "牡丹";
              flower = "芍药";
              console.log("点击", flower);
            }}
          >
            按钮
          </button>
        );
      }
      class Main extends React.Component {
        constructor() {
          super();
          this.state = {
            hi: "哈哈哈哈",
            aa: "小明",
          };
          this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
          // this.state.aa = '小红'
          this.setState({
            aa: "小红",
          });
          // 修改this指向：bind apply call
          console.log(this, "指向");
        }
        render() {
          return (
            <div>
              <p onClick={this.handleClick}>{this.state.aa}</p>
              {/*
                    <p onClick={this.handleClick.bind(this)}>{this.state.aa}</p>
                    */}
              <p
                onClick={() => {
                  this.state.hi = "嘿嘿嘿";
                  this.setState({
                    hi: "嘿嘿嘿",
                  });
                  console.log(this, "休息休息");
                }}
              >
                {this.state.hi}
              </p>
            </div>
          );
        }
      }
      root.render(<Main />);
    </script>
  </body>
</html>