如何让 Svelte 像 React 一样更新输入组件?

Question

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

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

从技术上讲，可以通过在玩具示例中写入value来解决此问题(例如，通过双向绑定代替：bind:value={value}(。这将导致 Svelte 更新value两次，第一次使用错误的值，然后触发失效代码，然后第二次使用正确的值。在我正在处理的场景中，我正在从只读的可观察对象中读取，因此黑客不是一种选择。你可以在这个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}
/>

在这里演示。

Answer 2

您可以使用 beforeinput 事件：

<script>
let value = 'test';
function sanitize(e) {
if (e.data.includes('x')) e.preventDefault();
}
</script>
<input
value={value}
on:beforeinput={sanitize}
/>

演示

您实际上可以对任何输入使用相同的模式来获得像 react 中一样的行为，这是受控输入的示例