jsx事件绑定-this的三种绑定方式
1.bind
2.使用箭头函数
3.使用回调函数
<!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>计数器</title>
</head>
<body>
<div id="root"></div>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.js"></script>
<script type="text/babel">
// const obj = {
// name: "obj",
// foo: function() {
// console.log("foo:", this)
// }
// }
// // obj.foo()
// const config = {
// onClick: obj.foo.bind(obj)
// }
// const click = config.onClick
// click()
/*
this的四种绑定规则:
1.默认绑定 独立执行 foo()
2.隐式绑定 被一个对象执行 obj.foo() -> obj
3.显式绑定: call/apply/bind foo.call("aaa") -> String("aaa")
4.new绑定: new Foo() -> 创建一个新对象, 并且赋值给this
*/
// 1.定义App根组件
class App extends React.Component {
// class fields
name = "App";
constructor() {
super();
this.state = {
message: "Hello World",
counter: 100,
};
this.btn1Click = this.btn1Click.bind(this);
}
btn1Click() {
console.log("btn1Click", this);
this.setState({ counter: this.state.counter + 1 });
}
btn2Click = () => {
console.log("btn2Click", this);
this.setState({ counter: 1000 });
};
btn3Click() {
console.log("btn3Click", this);
this.setState({ counter: 9999 });
}
render() {
const { message } = this.state;
return (
<div>
{/* 1.this绑定方式一: bind绑定 */}
<button onClick={this.btn1Click}>按钮1</button>
{/* 2.this绑定方式二: ES6 class fields */}
<button onClick={this.btn2Click}>按钮2</button>
{/* 3.this绑定方式三: 直接传入一个箭头函数(重要) */}
<button onClick={() => console.log("btn3Click")}>按钮3</button>
<button onClick={() => this.btn3Click()}>按钮3</button>
<h2>当前计数: {this.state.counter}</h2>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
</body>
</html>
第一种
默认绑定，就算直接执行函数，在严格模式下是undefined的。
默认情况下，在es6 class里面定义的所有函数都是严格模式。
image.png
用bable进行代码转换的时候，babel会将代码转换成严格模式。会在转换后的代码头写上"use strict".
在babel里面
<script type="text/babel">
</srcipt>
定义这个bar函数，执行的结果也是undefined
image.png
image.png
render函数里面的this是实例对象。
直接写onClick={this.btnClick}不是隐式调用。因为没有括号this.btnClick（），而是直接把函数地址赋值给onClick
React.createElement("button", {onClick:this.btnClick})
const click = config.onclick
触发事件的时候是在严格模式下单独执行click（）。所以里面的this指向的是undefined
解决方法
image.png
另一种写法
image.png
image.png
第二种
function Person(name, age) {
this.name = name;
this.age = age;
this.showName = () => {
console.log(this.name);
};
}
const p1 = new Person("tom", 18);
const test = p1.showName;
test(); //tom
第三种
就是隐式绑定
onClick={函数}
这个函数可以是箭头函数，返回值是一个函数的调用的化，就和前面直接传入函数是一样的。一个是让Onclick直接调用，一个是间接调用。
<button onClick={() => this.btn3Click()}>按钮3</button>
this.btn3Click()这个this是render函数的this，就算组件实例，组件实例有bn3Click的这个方法，隐式调用。
