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 对我不起作用，因为我正在比较以前的值和更新后的值。

相关

How do I make Svelte update input components like React does?

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 - 输入值并不总是更新

尝试的解决方案

3 个答案: