在 Svelte 中单击按钮后如何重新关注输入？

Question

用例

我正在构建一个聊天应用程序，因此每当用户在聊天框中键入消息并单击发送时，理想情况下它应该将注意力集中在输入上。目前，这需要用户再次单击输入以开始输入。

如何在 Svelte 中实现这一点？我尝试使用 bind:this 和 use: 指令。

编辑：这是一个 Svelte Sapper 项目。

Answer 1

您可以使用 bind:this={myComponentRef} 轻松创建对渲染组件的引用。然后聚焦它，只需调用 myComponentRef.focus():

<script>
  let message = ""

  let inputRef

  const onSend = () => {
    inputRef.focus()
  }
</script>

<input bind:this={inputRef} value={message}>
<button on:click={onSend}>Send Message</button>

看看REPL。

在 Svelte 中单击按钮后如何重新关注输入？

How to focus back on input after clicking button in Svelte?

svelte