es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

En Svelte, ¿hay alguna manera de deshacer la entrada de usuario no válida sin cambiar el estado?

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

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

Para ello, tengo que introducir un cambio temporal y redundante en counter (usando Number.NaN a continuación). De lo contrario, counter no cambia y 123a permanecerá dentro del cuadro de entrada, mientras que quiero que vuelva 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 manera mejor de hacerlo? Básicamente, quiero que se invoque una nueva representació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:

lang-javascript
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 alguna forma de indicar a Svelte que vuelva a representar todo el & lt; input & gt ;?

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

lang-jsx
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:

A:

</>
);
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Sí, hay una manera de deshacer la entrada de usuario inválida en Svelte sin desencadenar un cambio de propiedad momentáneamente falso para el estado. En el manejador de eventos, puede 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;
    };  
    

    Esto le dirá a Svelte que vuelva a renderizar todo el <input> sin cambiar el estado.

Comments are closed.