Svelte中设置input焦点报错'input.focus is not a function'求助

页面初始化阶段，bind:this={input}还未完成DOM元素的绑定，此时变量input仍是初始值空字符串""，调用input.focus()会报错——因为字符串类型不存在focus方法。而点击按钮时，元素已经完成渲染和绑定，所以能正常执行焦点设置。

方法1：在函数内校验DOM元素有效性 #

修改handleClick函数，先判断input是否为有效的DOM元素再执行焦点操作：

function handleClick() {
  if (input instanceof HTMLElement) {
    input.focus();
  }
}

方法2：用onMount确保DOM渲染完成后执行自动触发 #

如果需要页面加载时自动触发焦点，把自动执行逻辑放到Svelte的onMount钩子中，确保DOM已完全渲染：

<script>
import { onMount } from 'svelte';
let inx1 = "null";
let input = "";

function handleClick() {
  input.focus();
}

onMount(() => {
  if (inx1) {
    handleClick();
  }
});
</script>

<textarea style="clear: both;">{inx1}</textarea> 
<br/>
<input bind:this={input} placeholder="SET"/> 
<button on:click={handleClick}>  Focus input</button>

方法3：优化响应式语句的触发条件 #

调整响应式语句，同时校验inx1和input的有效性，只有两者都满足时才执行：

$: if (inx1 && input) {
  handleClick();
}

内容的提问来源于stack exchange，提问作者angelo alamia