Svelte - 输入值并不总是更新答案

【问题标题】：Svelte - Input value doesn't always updateSvelte - 输入值并不总是更新
【发布时间】：2021-07-31 09:21:15
【问题描述】：

我正在尝试在 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?

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

event.currentTarget.value = value 没有错，它可能不像 看起来苗条，但完全可以接受。

【讨论】：

【解决方案2】：

在您的示例中，您没有使用 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>

【讨论】：

不过，这仍然存在同样的问题。您仍然可以在输入中输入字母。是的，净化后的值不会有这些字母，但输入仍会显示它们。问题中没有提到这一点（所以我会更新它），但在这种情况下我还需要使用事件监听器而不是bind:value。

【解决方案3】：

如果您不想直接更新event.currentTarget.value，这也可以。

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

【讨论】：