javascript - 使用此方法从 JavaScript 类调用事件会导致 SyntaxError

Question

我想要做的是创建一个自定义动态输入。所以我将我的自定义输入包装在一个类中，一个 img 标签就像一个按钮，所以我处理了一个属性中的点击，它使用这个调用一个类方法，但是这个逻辑会产生一个语法错误。

这是我创建的类的代码：

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        return `<div class="row" >
            <img src="./icons/add.png" class="icon" onclick="${this.test}" /> 
            Intitulé : <input type="text" size="50" value="${this.value}"/>
        </div>`;
    }
}

这是错误消息：

未捕获的 SyntaxError：意外令牌：'{'

标签： javascripthtmloop

Answer 1

如果处理程序是独立的全局变量，则只能像这样内联处理程序，而事实test并非如此。创建一个<div>，插入 HTML，并将事件侦听器附加到子级并返回<div>.

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        const row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = `
            <img src="./icons/add.png" class="icon" /> 
            Intitulé : <input type="text" size="50" value="${this.value}"/>
        `;
        row.querySelector('img').addEventListener('click', () => this.test());
        return row;
    }
}

但这可能允许任意代码执行，因为字符串插值到 HTML 标记中。最好分配给.value输入的 。

class Description {
    constructor(value) {
        this._value = value;
    }

    get value() {
        return this._value;
    }

    set value(text) {
        this._value = text;
    }

    test() {
        console.log("Dummy Text");
    }

    build() {
        const row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = `
            <img src="./icons/add.png" class="icon" /> 
            Intitulé : <input type="text" size="50">
        `;
        row.querySelector('img').addEventListener('click', () => this.test());
        row.querySelector('input').value = this.value;
        return row;
    }
}