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

您可以使用 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>

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

Answer 2

您可以使用 bind:this 获取对输入 DOM 节点的引用，并将其导出为 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 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 组件中执行，因为它是特定于组件的功能。

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

How to focus on input field loaded from component in Svelte?

input

autofocus

svelte