React 基础巩固(九)——JSX 事件绑定
事件绑定
-
如果是原生 DOM 的监听事件
- 方式一:获取 DOM 原生,添加监听事件
- 方式二:在 HTML 原生中,直接绑定 onclick
-
在 React 中如何操作
- 命名采用小驼峰,非纯小写
- 通过{}传入一个事件处理函数,这个函数会在事件发生时被执行
-
this 的绑定问题
-
在事件执行后,我们可能需要获取当前类的对象中相关的属性,此时需要使用到this
- 若直接打印this,为undefined
-
为什么是undefined
- 原因是btnClick函数并不是我们主动调用的,而是当button发生改变时,React内部调用了btnClick函数
- 而它内部调用时,并不知道要如何绑定正确的this
-
this 的四种绑定规则
- 1.默认绑定 独立执行 foo()
- 2.隐式绑定 被一个对象执行 obj.foo() -> obj
- 3.显示绑定 call/apply/bind foo.call(“aaa”) -> String(“aaa”)
- 4.new 绑定 new Foo() -> 创建一个新对象,并且赋值给 this
-
-
事件绑定的三种方法
- 1.bind给btnClick显式绑定this
- 2.使用ES6 class fields 语法
- 3.事件监听时传入箭头函数(推荐)
<script type="text/babel">
// 1.创建root
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 2.封装App组件
class App extends React.Component {
// 组件数据
constructor() {
super();
this.state = {
message: "hello world",
};
this.btnClick1 = this.btnClick1.bind(this);
}
btnClick1() {
this.setState({
message: "outman chen",
});
}
btnClick2 = () => {
this.setState({
message: "outman chen",
});
};
btnClick3() {
this.setState({
message: "outman chen",
});
}
// 渲染内容
render() {
const { message } = this.state;
return (
<div>
<h2>{message}</h2>
{/* 1.this绑定方式一: bind绑定 */}
<button onClick={this.btnClick1}>change message</button>
{/* 2.this绑定方式二: ES6 class fields 利用箭头函数的特点(箭头函数无this,this会指向上一层的类实例) */}
<button onClick={this.btnClick2}>change message</button>
{/* 3.this绑定方式三: 直接传入一个箭头函数 */}˜<button onClick={() => this.btnClick3()}>change message</button>
</div>
);
}
}
// 3.渲染组件
root.render(<App />);
</script>