Svelte 3: обработка событий не работает должным образом - PullRequest
Новая
       19

Svelte 3: обработка событий не работает должным образом

2 голосов
/ 22 сентября 2019

На 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}

Но если я немного перейду на использование стрелкифункции, то все работает как положено.Почему это происходит, и как правильно обрабатывать события DOM в Svelte 3? 

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

1 Ответ

3 голосов
/ 25 сентября 2019

Значения обработчика события on:whatever должны быть функциями, которые будут вызываться с событием DOM в качестве аргумента.on:change={onFilesChange} хорошо, потому что onFilesChange - это функция, которая ожидает событие в качестве аргумента.on:click={onFileClick(file)} не потому, что это вызовет onFileClick(file) сразу, а возвращаемое значение из , которое , как ожидается, будет обработчиком событий.

Вы должны использовать on:click={() => onFileClick(file)}, чтобыОбработчик события - это функция, которой передается событие DOM (которое отбрасывается), а затем вызывается onFileClick(file).

...