主页 / coding / 问题 / 79289532
Accepted
elVengador
Asked: 2024-12-18 06:34:49 +0800 CST

为什么 svelte 上输入元素的值属性不起作用？

  • 772

我想管理状态的值a（进行自定义验证，所以我不会使用bind:value）以传递到我的输入中，但是输入中显示的值不是我在状态中的值a，为什么会发生这种情况？

在此处输入图片描述

<script lang="ts">
  let a = "";
  const onChange = (e: any) => {
    const nv = e.target.value;
    if (nv.length <= 4) {
      a = nv;
    }
  };
</script>

<div>value:{a}</div>

<input type="text" value={a} on:input={onChange} />
svelte

1 个回答

  1. Best Answer

    由于您未使用绑定且未发生更改，因此它们变得不同步a。输入值仅在a实际更改时更新。

    这也意味着您不能直接设置a = a强制更新，因为不会检测到任何变化。有办法解决这个问题，例如设置不同的中间值（但您必须等待一段时间才能生效，这可能会产生意想不到的后果）。

    如果使用keydown而不是input，则可以使用 取消该操作preventDefault()。但是，事件发生时的输入value尚不包含按键效果。

    长度限制也可以通过纯 HTML 进行：

    <input maxlength="4" />

    最简单的解决方案可能就是在事件中手动设置输入值，如下所示：

    if (/* validation check */) {
  a = e.target.value;
}
else {
  e.target.value = a;
}
    • 1

相关问题