reactive-programming - 如何让 Svelte 像 React 一样更新输入组件？

Question

我正在寻找动态清理用户输入。考虑这个 Svelte REPL 示例，我们尝试删除用户键入的所有 x。如果您键入“x”，则清理后的版本与原始版本相同，因此不会更新，但“x”仍会显示在输入字段中。一旦您键入另一个字符，就会发生变化，因此该字段会更新，并删除“x”。将此与始终正确反映状态的React 沙箱进行比较。

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

可以通过在玩具示例中写入来从技术上解决此问题value（例如，改为使用双向绑定：）bind:value={value}。这将导致 Svelte 更新value两次，第一次使用错误的值，然后触发失效代码，然后第二次使用正确的值。在我正在处理的场景中，我正在从只读的 Observable 中读取数据，因此不能选择 hack。您可以在这个 Svelte REPL 中使用这样的示例。

标签： reactive-programmingsveltesvelte-3

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

演示在这里。