Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

223
Visualizações
In Svelte, is there a way to undo invalid user input, without changing the state?

In Svelte, is there a way to undo invalid user input, without triggering a momentarily fake property change for state?

For example (try it online), when user types in 123a in the input box, I want to covert it to a number and assign it counter.

For that, I have to introduce a temporary and redundant change to counter (using Number.NaN below). Otherwise, counter won't change, and 123a will remain inside the input box, while I want to revert it back to 123:

<script>
    let count = 0;
    const handleClick = () => count++;
    const handleChange = async e => {
        const userValue = e.target.value;
        let newValue = userValue? parseInt(userValue): 0;
        if (isNaN(newValue)) newValue = count;
        count = Number.NaN;
        await Promise.resolve();
        count = newValue;           
    };  
</script>

Count: <button on:click={handleClick}>{count}</button>
<br />
A: <input value={count} on:input={handleChange} />
<br />

Is there a better way of doing it? Essentially, I want trigger a manual re-render for a part of my Svetle component, without changing the state.

Of course, in the event handler I could undo the change just by modifying e.target.value directly:

const handleChange = async e => {
    const userValue = e.target.value;
    let newValue = userValue? parseInt(userValue): 0;
    if (isNaN(newValue)) newValue = count;
    if (newValue == count)
        e.target.value = count;
    else
        count = newValue;
};  

But I wonder if there's a way to tell Svelte to re-render the whole <input>?

To compare, here's how I could do it in React (try it online):

function App() {
  let [count, setCount] = useState(0);
  const handleClick = () => setCount((count) => count + 1);
  const handleChange = (e) => {
    const userValue = e.target.value;
    let newValue = userValue ? parseInt(userValue) : 0;
    if (isNaN(newValue)) newValue = count;
    setCount(newValue);
  };
  return (
    <>
      Count: <button onClick={handleClick}>{count}</button>
      <br />
      A: <input value={count} onInput={handleChange} />
      <br />
    </>
  );
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You simply need to bind count to the value of the input. REPL

<script>
  let count = 0;
  
  const handleClick = () => count++;
  
  const handleChange = (e) => {
    const userValue = e.target.value;
    const newValue = userValue ? parseInt(userValue, 10) : 0;
  
    count = isNaN(newValue) ? count : newValue;
  };    
</script>

Count: <button on:click={handleClick}>{count}</button>
<br />
A: <input bind:value={count} on:input={handleChange} />
<br />

Note: Remember to always pass a radix to parseInt(), it does not default to 10.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda