在函数内部调用函数- StencilJS

Question

我遵循教程(构建拖放文件上传器)，我使用StencilJS(用于实践/乐趣)，并遇到了一个错误。

这是一些代码，如果需要，我可以发布所有的。

@Component({
tag: 'dynamic-uploader',
styleUrl: 'dynamic-uploader.css',
shadow: true,
})
export class DynamicUploader {
@Element() public dynamicUploader: HTMLElement;
@State() dropzoneActive: boolean = false;
@State() stagedFiles: Array<StagedFile> = [];
componentDidLoad() {
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
this.dynamicUploader.addEventListener(eventName, this.handleDefaultPrevention, false);
document.body.addEventListener(eventName, this.handleDefaultPrevention, false);
});
['dragenter', 'dragover'].forEach(eventName => {
this.dynamicUploader.addEventListener(eventName, () => (this.dropzoneActive = true), false);
});
['dragleave', 'drop'].forEach(eventName => {
this.dynamicUploader.addEventListener(eventName, () => (this.dropzoneActive = false), false);
});
this.dynamicUploader.addEventListener('drop', this.handleDroppedFile, false);
}
handleDefaultPrevention(event: Event) {
event.preventDefault();
event.stopPropagation();
}
handleFiles(file)  {
//   files = [...files];
//   files.forEach(this.handleFilePreview);
}
// handleFiles = files => {
//   files = [...files];
//   files.forEach(this.handleFilePreview);
// };
handleDroppedFile(event: InputEvent) {
let dataTransfer = event.dataTransfer;
let files = dataTransfer.files;
console.log(this.dynamicUploader);
Array.from(files).forEach(i => this.handleFilePreview(i));
}
handleFilePreview(file: File) {
this.stagedFiles = [...this.stagedFiles, <staged-file file={file}></staged-file>];
}
render() {
return (
<Host>
{`The dropzone is ${this.dropzoneActive ? 'active' : 'inactive'}`}
<form id="dynamic-uploader" class={{ 'is-active': this.dropzoneActive }}>
<p>Upload Evidence</p>
<input type="file" id="file-input" multiple accept="image/*" />
<label class="button" htmlFor="file-input">
Select some files
</label>
</form>
<div class="stage-files">{this.stagedFiles}</div>
</Host>
);
}
}

本质上，似乎handleFiles方法不起作用(当我调试时)，如果我把它写成箭头函数，函数就不存在了，我这样做是因为我认为存在作用域问题。但是用标准的方式来写并没有什么区别。

Answer 1

您没有在代码中调用handleFile，这就是为什么typescript编译器将其作为代码优化的一部分删除的原因。