Svelte

Question

我正在尝试在 Svelte 中创建一个输入组件，其中的值由 JavaScript 函数更新。但是，如果新值与旧值相同，Svelte 将不会更新输入元素。

例如，该组件应将输入限制为只能输入数字。如果您输入“123abc”，输入将显示“123abc”，而 value 变量只是“123”。

<script>
    let value = ''
    
    const handleInput = (event) => {
        value = event.currentTarget.value.replace(/[^\d]/gu, '')
    }
</script>

<input {value} type='text' on:input={handleInput} />

<p>
    Value: "{value}"
</p>

有没有办法让输入值始终等于 value 变量？

尝试过的解决方案

使用 HTML pattern 属性。虽然它适用于这个例子，但它不适用于我试图解决的一般情况
只能说 event.currentTarget.value = value。这很完美，但看起来不像 Svelte。
bind:value 与事件侦听器（例如 $: value = value.replace(/[^\d]/gu, '')）有相同的问题。此外，在一般情况下，bind:value 对我不起作用，因为我正在比较以前的值和更新的值。

相关

Answer 1

在您的示例中，您没有使用 bind:value 并将 value 声明为其输入，而是您可以使用此方法

REPL

<script>
    let value = ''
    
    $: sanitized = value.replace(/[^\d]/gu, '')
</script>


<input bind:value />

<p>
    display value: {value}
</p>

<p>
    display value: {sanitized}
</p>

Answer 2

这样做没有错event.currentTarget.value = value它可能看起来苗条但完全可以接受。

Answer 3

如果你不想直接更新event.currentTarget.value，这也行。

const handleInput = (event) => {
    value = event.currentTarget.value;
    value = value.replace(/[^\d]/gu, '');
}

Svelte - 输入值并不总是更新

Svelte - Input value doesn't always update

svelte-3

尝试过的解决方案