Как привязать querySelector к компоненту в Svelte?

У меня есть этот компонент, и я хотел бы произвести некоторые манипуляции с его дочерними элементами способами, которые невозможно реализовать в режиме, управляемом состоянием. Поэтому я хотел бы использовать в нем оператор и querySelector. Но как я могу привязать его к элементу? На странице есть несколько экземпляров компонента, поэтому использование класса или идентификатора невозможно. Как я могу этого добиться?

Вот упрощенный код:

    <script>
      export let value = ''
      export let readonly = true

      $: if (value && !readonly){
      // selects the first element in the document, not the one from this instance 
      const nd = document.querySelector('.forminput')
      // Do something with nd
    }
   </script>

    <textarea bind:value wrap="soft" rows="1" class="forminput"></textarea>

svelte svelte-component
person Antoine    schedule 04.05.2020    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете использовать bind:this для присвоения элемента переменной

<script>
   let wrapper;
</script>

<div bind:this="{wrapper}"></div>

теперь вы можете использовать wrapper, как если бы вы получили его из querySelector

person Stephane Vanraes    schedule 04.05.2020

arrow_upward
0
arrow_downward

Основываясь на ответе Стефана Ванреса, используйте bind:this для привязки элемента верхнего уровня вашего компонента к переменной, а затем используйте querySelector и querySelectorAll для этого корневого элемента. Например:

<script>
  import { onMount } from 'svelte';
  let root;
  let text;
  let value;

  onMount(() => {
     const nd = root.querySelectorAll('.forminput');
     // Do something with nd, such as adding event listeners, styles, etc.
  });
</script>

<div bind:this={root}>
  <input type="text" bind:value class="forminput"/>
  <textarea bind:text wrap="soft" rows="1" class="forminput"></textarea>
</div>

Затем вы можете получить полную мощность querySelector в области действия вашего компонента.

Обратите внимание, что root правильно привязывается только после того, как компонент был смонтирован, таким образом, инкапсуляция кода в функции onMount.

person Vikash Madhow    schedule 02.08.2020