不同文件中的继承类父“this”结果为未定义

Question

我是 javascript/react 的新手，我尝试进行类继承。问题是，当我创建一个新的“子”并从父级调用函数时，“this”结果为未定义......这是我的文件：第一个文件：import React, { Component } from 'react';import ChildChecker from './ChildChecker';class ExampleForm extends Component {    render() {        let Checker = new ChildChecker();        return (           <label>               Name :                   <input type="text" onBlur={Checker.handleNameBlur} />           </label>        )    }}export default ExampleForm;儿童检查器：import ParentChecker from './ParentChecker';export default class ChildChecker extends ParentChecker {}家长检查器：export default class ParentChecker {    constructor() {        this.data = {            'foo': 'bar',        };    }    handleNameBlur(e) {        console.log(this.data); // <=== "this" result to undefined.        /* ... */    }}

Answer 1

handleNameBlur在另一个上下文（Class）中使用，因此您应该将其ExampleForm绑定在 ParentChecker 中以保留上下文。

export default class ParentChecker {

    constructor() {

        this.data = {

            'foo': 'bar',

        };

        this.handleNameBlur = this.handleNameBlur.bind(this);

    }

    handleNameBlur(e) {

        console.log(this.data); // <=== "this" result to undefined.

    /* ... */

    }

}