En Svelte, ¿hay alguna manera de deshacer la entrada de usuario no válida, sin activar un cambio de propiedad momentáneamente falso para el estado?

Por ejemplo ( pruébelo en línea ), cuando el usuario escribe 123a en el cuadro de input , quiero convertirlo en un número y asignarle un counter .

Para eso, tengo que introducir un cambio temporal y redundante en el counter (usando Number.NaN continuación). De lo contrario, el counter no cambiará y 123a permanecerá dentro del cuadro de input , mientras que quiero revertirlo a 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 />

¿Hay una mejor manera de hacerlo? Esencialmente, quiero activar una nueva renderización manual para una parte de mi componente Svetle, sin cambiar el estado.

Por supuesto, en el controlador de eventos podría deshacer el cambio simplemente modificando e.target.value directamente:

 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; };

Pero me pregunto si hay una manera de decirle a Svelte que vuelva a renderizar todo el <input> .

Para comparar, así es como podría hacerlo en React ( pruébelo en línea ):

 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 /> </> ); }