javascript - 如何关注Svelte中新增的输入？

我使用#each为tasks数组的每个成员显示输入。当我单击“添加任务”按钮时，新元素将插入到数组中，因此新输入将出现在#each循环中。

单击添加任务按钮时，如何集中已添加的输入？

<script>
  let tasks = [];

  function addTask() {
    tasks = [...tasks, { title: "" }];
  }
</script>

{#each tasks as task}
  <input type="text" bind:value={task.title} />
{/each}

<button on:click={addTask}>Add task</button>

最佳答案

Rich Harris有更好的solution

您可以使用 use:action :



例如:

<script>
  let tasks = [];

  function addTask() {
    tasks = [...tasks, { title: "" }];
  }

  function init(el){
    el.focus()
  }
</script>

{#each tasks as task}
  <input type="text" bind:value={task.title} use:init />
{/each}

<button on:click={addTask}>Add task</button>

关于javascript - 如何关注Svelte中新增的输入？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57257499/