不同文件中的继承类父“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 {&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; this.data = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'foo': 'bar',&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; this.handleNameBlur = this.handleNameBlur.bind(this);&nbsp; &nbsp; }&nbsp; &nbsp; handleNameBlur(e) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.data); // <=== "this" result to undefined.&nbsp; &nbsp; /* ... */&nbsp; &nbsp; }}