在 Svelte 3.12.1 上,当事件处理程序onFilesChange被触发时,它会意外触发onFileClick。
<script>
let files = [];
function previewImage(file) {
return "<img src='" + file.previewURL + "' />";
}
function onFileClick(file) {
console.log("onFileClick");
files.splice(files.findIndex(x => x.name === file.name), 1);
files = files;
}
function onFilesChange(event) {
console.log("onFilesChange");
let inputFiles = event.target.files;
for (var i = 0; i < inputFiles.length; i++)
files.push({inputFile: inputFiles.item(i), previewURL: URL.createObjectURL(inputFiles.item(i))});
files = files;
}
</script>
<input accept="image/*" multiple name="files" type="file" on:change={onFilesChange}/>
{#each files as file}
<figure on:click={onFileClick(file)}>
{@html previewImage(file)}
</figure>
{/each}
但是,如果我稍微更改为使用箭头函数,那么它会按预期工作。为什么会发生这种情况,在 Svelte 3 中处理 DOM 事件的正确方法是什么?
<input accept="image/*" multiple name="files" type="file" on:change={(event) => onFilesChange(event)}/>
{#each files as file}
<figure on:click={(file) => onFileClick(file)}>
{@html previewImage(file)}
</figure>
{/each}