如何让 Svelte 像 React 一样更新输入组件？答案

【问题标题】：How do I make Svelte update input components like React does?如何让 Svelte 像 React 一样更新输入组件？
【发布时间】：2020-10-07 03:03:23
【问题描述】：

我希望即时清理用户输入。考虑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这样的例子。

【问题讨论】：

标签： reactive-programming svelte svelte-3

【解决方案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.

【讨论】：

感谢您的回答，Rich。恐怕这无济于事。 1) input 事件不是可取消的事件，所以 preventDefault 在这里什么都不做。（您可能对keypress 感到困惑？） 2）value = e.target.value 部分是导致此处失效的原因，我明确表示我不想要，因为我在处理真实案例中的 Observable。不过谢谢！
你试过链接的 REPL 演示吗？我向你保证input 活动是可以取消的！如果您尝试解决的问题与 Observable 相关，请将其包含在提供的重现和代码示例中，否则我不确定人们能够为您提供多少帮助。
感谢您的反馈。我已经更新了这个问题。我希望现在更清楚了。我确实尝试了 REPL 演示。通过从示例中删除 value = e.target.value，您可以观察到此处的 preventDefault 无法实现其目标。我不确定您是否指的是 Svelte 在正常事件处理之上所做的事情，但 Web 标准中的正常 input 事件肯定是不可取消的。（请参阅MDN。）感谢您与我一起思考这个问题！