如何关注从 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

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

例子

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

您实际上在 .txt 中有几个错别字App.svelte。

首先，导入组件。

import TextField from './TextField'

那应该是：

import TextField from './TextField.svelte';

其次，Svelte 包本身。

import {onMount} from 'svete'

那应该是：

import { onMount } from 'svelte';

好的，现在我们准备好编码了。

既然autofocus要避免attribute，我们可以参考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组件中执行，因为它是组件特定的功能。