Получение DOM-Node через bind:this в компоненте
Необходимо получить ноду DOM, пытаюсь это реализовать через bind:this, но я использую компоненты и вместо dom получаю сам компонент.
pin.svelte:
<!-- Тут я пытаюсь получить DOM компонента -->
<script lang="ts">
import { cn } from '$lib/utils';
import { Input } from './ui/input';
let className: string | undefined | null = undefined;
export { className as class };
let digits_num: number = 6;
let inputs: Input[] = [];
function focusInput(curId: number) {
console.log(inputs[curId]);
}
</script>
<div class={cn('flex flex-row space-x-2 py-4', className)} {...$$restProps}>
{#each Array(digits_num) as _, i}
<Input
bind:this={inputs[i]}
placeholder={i + 1 + ''}
on:keyup={() => focusInput(i)}
class="col-span-3 max-w-[35px]"
/>
{/each}
</div>
input.svelte:
<script lang="ts">
<!-- Сам компонент, DOM которого мне нужно получить -->
import type { HTMLInputAttributes } from 'svelte/elements';
import { cn } from '$lib/utils';
import type { InputEvents } from '.';
type $$Props = HTMLInputAttributes;
type $$Events = InputEvents;
let className: $$Props['class'] = undefined;
export let value: $$Props['value'] = undefined;
export { className as class };
</script>
<input
class={cn(
'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
bind:value
on:blur
on:change
on:click
on:focus
on:keydown
on:keypress
on:keyup
on:mouseover
on:mouseenter
on:mouseleave
on:paste
on:input
{...$$restProps}
/>