Início / coding / Perguntas / 79289532
Accepted
elVengador
Asked: 2024-12-18 06:34:49 +0800 CST

Por que a propriedade value no elemento de entrada no Svelte não está funcionando?

  • 772

Quero gerenciar o valor do aestado (para fazer validações personalizadas, então não usarei bind:value) para passar para minha entrada, mas o valor exibido na entrada não é o valor que tenho no aestado, por que isso aconteceu?

insira a descrição da imagem aqui

<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 respostas

  1. Best Answer

    Eles ficam fora de sincronia, pois você não está usando uma ligação e anão está sendo alterado. O valor de entrada só é atualizado quando arealmente muda.

    Isso também significa que você não pode simplesmente definir a = apara forçar uma atualização, já que nenhuma alteração seria detectada. Há maneiras de contornar isso, por exemplo, definir um valor intermediário diferente (embora você tenha que esperar um tique para que isso tenha efeito, o que pode ter consequências não intencionais).

    Se você usar keydownem vez de input, você pode cancelar isso usando preventDefault(). No entanto, as entradas valueno momento do evento não incluirão o efeito do pressionamento da tecla, ainda.

    A restrição de comprimento também pode ser feita via HTML simples:

    <input maxlength="4" />

    A solução mais fácil é provavelmente definir o valor de entrada manualmente no evento, da seguinte forma:

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

relate perguntas