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节点的引用，并将其导出为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

您可以使用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组件中执行，因为它是特定于组件的功能。

如何关注从Svelte组件加载的输入字段？

3 个答案: