Question

我希望即时清除用户输入。考虑this Svelte REPL example，我们尝试删除用户键入的所有x。如果键入“ x”，则净化后的版本与原始版本相同，因此不会更新，但是在输入字段中仍显示“ x”。键入另一个字符后，将发生更改，因此将更新该字段，并删除“ x”。将此与this React sandbox进行比较，该状态始终可以正确反映出来。

如何在Svelte中获得React的行为？

从技术上讲，可以通过在玩具示例中写入value来解决此问题（例如，通过双向绑定：bind:value={value}）。这将导致Svelte更新两次value，首先更新错误的值，然后执行触发无效代码，然后第二次更新正确的值。在我正在处理的场景中，我正在从Observable中读取它们，它们是只读的，因此无法选择hack。您可以使用这样的示例in this Svelte REPL。

Answer 1

您需要阻止事件的默认行为：

<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}
/>

Demo here。

如何使Svelte像React一样更新输入组件？

1 个答案: