¿Cómo creo un estado para alternar los botones de mi formulario entre verdadero o falso (sí y no)?
Estoy tratando de manejar el estado con una función:
const onMutate = (e) => { // toggle buttonState = !buttonState; // Files if (e.target.files) { formData = { ...formData, images: e.target.files }; } // texts/number/boolean if (!e.target.files) { formData = { ...formData, [e.target.id]: buttonState ?? e.target.value }; } };Mi estado:
let buttonState = false;Puse la función (onMutate) en mis eventos:
on:click={onMutate} on:Change={onMutate}Está bien. Puedo cambiar mis botones entre sí o no (verdadero o falso) con el evento 'on:click', pero cuando escribo en la entrada, disparo el mismo evento y obtengo verdadero o falso en mis entradas. Sé que es un problema de javascript más que de Svelte. Sé dónde está el problema:
// texts/number/boolean if (!e.target.files) { formData = { ...formData, [e.target.id]: buttonState ?? e.target.value }; }Pero no se como solucionarlo.
Es bastante difícil descifrar qué es exactamente lo que quieres lograr. Pero creo que pude encontrar algo que probablemente sea la raíz de su problema. Es decir, obtienes true y false en formData .
Esto ocurre porque estás usando el ?? operador. Funciona de la siguiente manera (con el ejemplo de a ?? b ): referencia MDN
null o undefined , devolverá ba En su caso, buttonState no es null ni undefined , por lo que el valor de la expresión será el valor de buttonState , es decir, true o false .
Puedo suponer que quería usar una lógica en la que, si buttonState es true , incluya el valor de la entrada; de lo contrario, no lo haga.
La expresión adecuada para esto es (usando el operador ternario condicional ):
buttonState ? e.target.value : null
Esto producirá el valor de la entrada si buttonState es true , y null si buttonState es false . Por supuesto, puede usar otros valores en lugar de null para el estado falso.
Algunas notas adicionales:
El buttonState se alterna en cada evento, incluso en el evento onChange . No sé si es intencional, pero parece extraño, que cuando escribes algo en un cuadro de entrada, tu botón se enciende y se apaga. Sería más lógico si el botón tuviera su propio controlador de eventos, que podría ser tan simple como:
<button on:click={()=> buttonState=!buttonState}>....
Nota n.º 2: es realmente útil para las personas que deseen ayudarlo si proporciona una pequeña maqueta de trabajo en un REPL y un enlace a ella en su pregunta. Es bueno que haya proporcionado una parte de su código, pero aún es difícil averiguar cómo se supone que funciona todo. Sé que es trabajo extra, pero obtendrá respuestas más rápidas y mejores.