如何专注于从 Svelte 中的组件加载的输入字段？

Question

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

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>

App.svelte

<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" />

Answer 1

您可以使用bind:this 获取对输入DOM 节点的引用并将其导出为道具并在父组件中使用。

示例

<!-- TextField.svelte -->
<script>
  export let label = '';
  export let name = '';
  export let placeholder = '';
  export let value = '';
  export let ref = null;
</script>

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

<!-- App.svelte -->
<script>
  import TextField from './TextField.svelte';
  import { onMount } from 'svelte';

  let ref;

  onMount(() => {
    ref.focus(); 
  });      
</script>

<TextField label="First Name" name="firstname" bind:ref />

Answer 2

您可以使用autofocus 属性。

<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>

但正如this answer 中所述，从可访问性的角度来看，这可能不是一个好主意。

Answer 3

您实际上在App.svelte 中有几个拼写错误。

首先，导入组件。

import TextField from './TextField'

应该是：

import TextField from './TextField.svelte';

其次，Svelte 包本身。

import {onMount} from 'svete'

应该是：

import { onMount } from 'svelte';

好的，现在我们可以开始编码了。

由于应该避免使用autofocus 属性，我们可以参考Tholle 的答案。

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

<script>
    import { onMount } from 'svelte';

    export let focused = false;
    export let label = '';
    export let name = '';
    export let placeholder = '';
    export let value = '';

    let elm;

    onMount(function() {
        elm.focus();
    });
</script>

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

在App.svelte 中，调用组件。

<script>
  import TextField from './TextField.svelte';
</script>

<TextField label="First Name" name="firstname" focused/>
<TextField label="Last Name" name="lastname" focused/>

Svelte REPL 上提供的演示。

我的回答和 Tholle 的不同之处在于 focus() 应该在 TextField 组件中执行，因为它是组件特定的功能。