如何为Svelte UX的TextField组件设置焦点？

• 优先使用Svelte组件绑定而非原生DOM查询
  Svelte框架更推荐通过组件提供的绑定属性获取内部元素，避免原生DOM查询的时机问题。Svelte UX的TextField通常会暴露内部input元素的绑定，比如bind:input或bind:element，示例代码如下：

  <script>
    import { TextField } from 'svelte-ux';
    let inputElement;
  
    function triggerFocus() {
      inputElement?.focus();
    }
  </script>
  
  <TextField bind:input={inputElement} />
  <button on:click={triggerFocus}>聚焦输入框</button>
  

• 检查id是否绑定到实际input元素
  不少封装组件会把传入的id赋值给外层容器而非内部的input标签，这时候用document.getElementById('the-id')拿到的是容器元素，自然没有focus()方法。可以通过浏览器开发者工具查看DOM结构，确认input的真实选择器，再用querySelector定位：

  // 假设input是id为the-id的子元素
  const input = document.querySelector('#the-id input');
  input?.focus();
  

• 确保DOM元素已渲染再调用方法
  如果一定要用原生查询，必须保证代码执行时元素已经挂载到DOM中。比如放在onMount钩子（组件首次渲染完成后触发）或者用户交互事件（比如点击按钮）里，避免在组件初始化阶段直接调用：

  <script>
    import { onMount } from 'svelte';
    import { TextField } from 'svelte-ux';
  
    onMount(() => {
      const input = document.querySelector('#the-id input');
      input?.focus();
    });
  </script>
  
  <TextField id="the-id" />
  

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