使用此方法从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：意外的令牌："｛">

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;
}
}