Input 如何关注从苗条组件加载的输入字段？

加载包含输入字段的组件后。我怎样才能专注于那个特定的领域

TextField.svelte

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />

导出let标签=“”
导出let名称=“”
导出let占位符=“”
导出let值=“”
{label}

App.svelte

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />

从“./TextField”导入TextField
从“svete”导入{onMount}
onMount（（）=>{
//这句话很有趣，我知道
document.querySelector（'[name=“firstname”]'）.focus（）
})

您可以使用

自动对焦

属性

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} autofocus > // <-- here
  <slot></slot>
</div>

导出let标签=“”
导出let名称=“”
导出let占位符=“”
导出let值=“”
{label}
//您可以使用
自动对焦
属性

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} autofocus > // <-- here
  <slot></slot>
</div>


导出let标签=“”
导出let名称=“”
导出let占位符=“”
导出let值=“”
{label}
//您可以使用
bind:this
获取对输入DOM节点的引用，并将其导出为道具并在父组件中使用

示例

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />


出口许可证标签=“”；
导出let name=''；
导出let占位符=“”；
导出let值=“”；
导出let ref=null；
{label}
从“./TextField.svelte”导入TextField；
从“svelte”导入{onMount}；
让我们参考；
onMount（（）=>{
参考焦点（）；
});      
您可以使用
bind:this
获取对输入DOM节点的引用，并将其导出为道具并在父组件中使用

示例

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />


出口许可证标签=“”；
导出let name=''；
导出let占位符=“”；
导出let值=“”；
导出let ref=null；
{label}
从“./TextField.svelte”导入TextField；
从“svelte”导入{onMount}；
让我们参考；
onMount（（）=>{
参考焦点（）；
});      
您在
App.svelte
中实际上有几个打字错误

首先，导入组件

从“./TextField”导入TextField

这应该是：

从“./TextField.svelte”导入TextField；

第二，苗条的包装本身

从'svete'导入{onMount}

这应该是：

从'svelte'导入{onMount}；

好了，现在我们可以开始编写代码了

由于应避免使用
autofocus
属性，我们可以使用Thole的答案作为参考

在
TextField.svelte
中，处理自动对焦


从“svelte”导入{onMount}；
export-let=false；
出口许可证标签=“”；
导出let name=''；
导出let占位符=“”；
导出let值=“”；
让榆树；
onMount（函数（）{
elm.focus（）；
});
{label}

在
App.svelte
中，调用组件


从“./TextField.svelte”导入TextField；

该演示可在上获得

我的回答和Thole的不同之处在于
focus（）
应该在
TextField
组件中执行，因为它是特定于组件的功能。
您在
App.svelte
中有几个输入错误

首先，导入组件

从“./TextField”导入TextField

这应该是：

从“./TextField.svelte”导入TextField；

第二，苗条的包装本身

从'svete'导入{onMount}

这应该是：

从'svelte'导入{onMount}；

好了，现在我们可以开始编写代码了

由于应避免使用
autofocus
属性，我们可以使用Thole的答案作为参考

在
TextField.svelte
中，处理自动对焦


从“svelte”导入{onMount}；
export-let=false；
出口许可证标签=“”；
导出let name=''；
导出let占位符=“”；
导出let值=“”；
让榆树；
onMount（函数（）{
elm.focus（）；
});
{label}

在
App.svelte
中，调用组件


从“./TextField.svelte”导入TextField；

该演示可在上获得

我的答案和Thole的不同之处在于
focus（）
应该在
TextField
组件中执行，因为它是特定于组件的功能。
不要编辑我的问题，因为它有愚蠢的打字错误，所以你写的宝贵的行仍然相关：）不要编辑我的问题，因为它有愚蠢的打字错误，所以你写的宝贵的行仍然相关：）我的问题有打字错误。参考下面的答案。我的问题有拼写错误。参考下面的答案。你试过这个代码吗
ref.focus（）
似乎对我不起作用，而我可以使用
ref
更改元素的其他属性。您尝试过此代码吗
ref.focus（）
似乎对我不起作用，而我可以使用
ref
更改元素的其他属性。现在，这会触发一个警告：
A11y：避免使用自动聚焦（A11y自动聚焦）
。因此，正如OP所说，这可能不是一个好办法。如今，这将触发一个警告：
A11y：避免使用AutoFocusVelte（A11y autofocus）
。所以正如OP所说的，可能不是一条路要走。