不同文件中的继承 class 父“this”导致未定义

Question

我是 javascript/react 的新手，我尝试继承 class。

问题是，当我创建一个新的“子项”并从父项调用一个函数时，“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在另一个上下文中使用（ClassExampleForm）所以你应该在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.
    /* ... */
    }
}