哦又是this——浅谈 React 事件绑定

Photo by Jeremy Zero on Unsplash

在使用 React JSX 事件绑定中有个最大的问题是它不会帮你处理 this 的指向问题。我刚刚上手的时候有些疑惑,看了教程之后豁然开朗。

React 事件绑定的需要和显示的修改对应事件处理函数的 this 的值。这主要是因为 Babel 开启了严格模式。若这个函数 this 指向没有改变,直接赋值给 onClick,那么函数体内的 this 仍是 undefined 。为此需要使用 bind 函数来修改函数体内的 this 指向。比如下面这段代码 :

import React, { Component } from "react";

class test extends Component {
  test() {}
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对于一个类组件,this 指向的是类的实例,this.test 方法会沿着原型链找到类中定义的 test 方法,然后将这个类方法中的 this 替换为当前实例对象。这样一来, test 方法中的 this 就可以当前实例对象的值。

另一种方法是将 test 写出箭头函数的形式。这里有两个含义。首先 test = func 的形式,test 就是一个实例属性,但是这样仍然没有改变这个直接调用时函数内部的 this 的指向。但是假如写成箭头函数的形式,箭头函数中的 this 会使用实例对象的 this,如下所示。

import React, { Component } from "react";

class test extends Component {
  test = () => {};
  render() {
    return <div onClick="this.test.bind(this)"></div>;
  }
}

export default test;

对应视频教程

bind https://www.bilibili.com/video/BV1wy4y1D7JT?p=16

箭头函数 https://www.bilibili.com/video/BV1wy4y1D7JT?p=18

发表评论

邮箱地址不会被公开。