lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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">
      // 原生DOM的事件绑定：1 通过事件属性：onclick,onkeyup,onchange,onblur,onsubmit，... 2 通过DOM对象的方法 addEventListener()

      // 一： 在React中，只能通过 第一种方式 来注册事件。但是也有一点区别：原生事件属性 是由 “on + 事件类型” 组成的属性 ，因此在jsx上需要改成等价的驼峰命名即可，绑定的事件监听器必须是函数类型

      // 二：如果获取事件对象。当React事件触发时，事件的监听器会被传入一个唯一参数 就是 事件对象，一般参数名为 e，ev， event。

      // 三：监听器中的this：在实际开发时，我们会更多的去通过this来获取到组件实例（一般不会在函数组件中讨论监听器的this)

      const root = ReactDOM.createRoot(document.querySelector('#root'));

      class App extends React.Component {
        constructor(props) {
          super(props);

          // 给监听器绑定this
          this.handleClick = this.handleClick.bind(this);
        }

        // 不同于 函数组件，函数组件的监听器 定义位置比较随意 只要作用域能访问到即可、但是一般 会定义在函数组件内部。

        // 类组件中 通常使用组件的实例方法 作为 事件的监听器函数
        // 通常情况下，组件实例方法中this绑定的值为 组件实例
        // 但是 一旦组件实例方法 注册为 事件监听器，this = undefined。如有需要，自己绑定this
        handleClick() {
          console.log(this); // undefined
        }

        render() {
          return (
            <div>
              <p>
                <button onClick={this.handleClick}>click me</button>
              </p>
            </div>
          );
        }
      }

      root.render(<App />);

      // var obj = {
      //   fn() {
      //     console.log(this); // obj
      //   },
      // };

      // obj.fn();

      // var f = obj.fn;
      // f();

      // f.call(window);
    </script>
  </body>
</html>