Question

现在，我正在尝试从同一类中的另一个方法调用一个方法。当我尝试执行此操作时，出现错误

this.beginConnDrag不是函数

这是类的样子，只显示了重要的方法。

    class NEditor {
    constructor() {
        ...
    }

    ...

    beginConnDrag(path) {
        if (this.dragMode != 0) return;

        this.dragMode = 2;
        this.dragItem = path;
        this.startPos = path.output.getPos();

        this.setCurveColor(path.path, false);
        window.addEventListener("click", this.onConnDragClick);
        window.addEventListener("mousemove", this.onConnDragMouseMove);
    }

    onOutputClick(e) {
        e.stopPropagation();
        e.preventDefault();
        var path = e.target.parentNode.ref.addPath();
        console.log(e.target.parentNode);
        console.log("output clicked");

        this.beginConnDrag(path);
    }
}

当试图调用beginConnDrag组件时，此错误将引发onOutputClick（）方法的最底行。如果这些不是静态方法，我将不明白为什么不允许此调用。

Answer 1

您可以使用arrow函数来使this对象保持不变：-

class NEditor {
    constructor() {
        ...
    }

    ...

    beginConnDrag = (path) => {
        if (this.dragMode != 0) return;

        this.dragMode = 2;
        this.dragItem = path;
        this.startPos = path.output.getPos();

        this.setCurveColor(path.path, false);
        window.addEventListener("click", this.onConnDragClick);
        window.addEventListener("mousemove", this.onConnDragMouseMove);
    }

    onOutputClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        var path = e.target.parentNode.ref.addPath();
        console.log(e.target.parentNode);
        console.log("output clicked");

        this.beginConnDrag(path);
    }
}

Answer 2

这是因为this的绑定错误

如下所示的呼叫处理程序功能

window.addEventListener("click", this.onConnDragClick.bind(this));

从同一类中的另一个方法调用方法

2 个答案: