Как мне заставить Svelte обновлять входные компоненты, как это делает React? - PullRequest
Новая
       74

Как мне заставить Svelte обновлять входные компоненты, как это делает React?

1 голос
/ 17 июня 2020

Я хочу очистить ввод пользователя на лету. Рассмотрим этот пример Svelte REPL , где мы пытаемся удалить все x, вводимые пользователем. Если вы введете «x», очищенная версия будет такой же, как и исходная, поэтому она не обновляется, но «x» по-прежнему отображается в поле ввода. Как только вы вводите другой символ, означает изменение, поэтому поле обновляется с удалением «x». Сравните это с этой песочницей React , где состояние всегда правильно отражается.

Как мне получить поведение React в Svelte?

Технически можно было бы обойдите эту проблему, написав в value в примере с игрушкой (например, используя вместо этого двустороннюю привязку: bind:value={value}). Это заставит Svelte обновить value дважды, сначала с неправильным значением, которое затем вызывает код аннулирования, а затем второй раз с правильным значением. В сценарии, с которым я имею дело, я читаю из Observable, который доступен только для чтения, так что взлом не вариант. Вы можете поиграть с таким примером в этом Svelte REPL .

1 Ответ

1 голос
/ 17 июня 2020

Вам необходимо предотвратить поведение события по умолчанию: 

<script>
  let value = 'test';

  function sanitize(e) {
    e.preventDefault();
    value = e.target.value = e.target.value.replace(/x/g, '');
  }
</script>

<input
  value={value}
  on:input={sanitize}
/>

Демо здесь .

...