|
@@ -0,0 +1,69 @@
|
|
|
|
|
+<!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>
|
大侠