Tengo dos campos de texto de entrada donde quiero actualizarlos automáticamente usando el estado. Pero cada vez que desmarco la casilla, el valor desaparece. Una vez ingresado, debería estar allí si también desmarco. Si no, no puedo escribir dos valores diferentes en el campo de texto de entrada.
import "./styles.css"; import { Jsme } from "jsme-react"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { default as FormData } from "form-data"; export default function App() { // I added the following state variables to keep track of checkboxes const [isCheckbox1Checked, setIsCheckbox1Checked] = useState(false); const [isCheckbox2Checked, setIsCheckbox2Checked] = useState(false); const [input1, setInput1] = useState(""); const [input2, setInput2] = useState(""); const [syncToFirst, setSyncToFirst] = useState(); const [solutestate, setSoluteState] = useState(); const { register, handleSubmit, control } = useForm({ defaultValues: { solute: "", solvent: "" } }); return ( <div className="App"> <Jsme height="300px" width="400px" options="oldlook,star" onChange={setSoluteState} /> <h1>{solutestate}</h1> <input className="mr-2 leading-tight" type="checkbox" value={isCheckbox1Checked} onChange={() => setIsCheckbox1Checked(prev => !prev)} /> <input className="mr-2 leading-tight" type="checkbox" value={isCheckbox2Checked} onChange={() => setIsCheckbox2Checked(prev => !prev)} /> <form> <input {...register("solute")} placeholder="SOLUTE" onChange={(e) => syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value) } value={isCheckbox1Checked ? solutestate : input1} /> <input {...register("solvent")} placeholder="SOLVENT" onChange={(e) => syncToFirst === 2 ? setSoluteState(e.target.value) : input2(e.target.value) } value={isCheckbox2Checked ? solutestate : input2} /> </form> </div> ); } necesita un controlador para guardar el estado cuando cambia el texto. de modo que si desmarco la casilla de verificación, el estado anterior está presente en el texto del campo de entrada. y cada vez que trato de escribir directamente en el segundo campo de texto de entrada, arroja un error ya que input2 is not a function .enlace de caja de arena de código
En primer lugar input2(e.target.value) no es una función. Tal vez quisiste decir setInput2(e.target.value) .
En segundo lugar, establece el valor de syncToFirst como undefined . Así que la declaración
syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value) entra en la parte else o : que establece su valor en "" nuevamente, ya que e.target.value es "" . Espero que eso responda a tu pregunta.
Edit :
Explicando más cuando se selecciona la primera casilla de verificación, el valor de syncToFirst es 1. Ahora, cuando escribe algo en la primera casilla de verificación, llama a este método setSoluteState pero el valor de input1 como única fuente de verdad es "". Entonces, cuando desmarca este campo, syncToFirst se convierte en 2. Ahora el valor se convierte en input1 como lo ha dado. Pero input1 es "" , por lo que se vuelve vacío. Sin embargo, el otro campo de texto toma el valor del estado de soluto y sube. Ahora, cuando escriba en el primer campo input1, cambiará su valor.
Este es el comportamiento esperado nada fuera de lugar. Deberías trabajar en tu lógica o enviarme un mensaje privado. Recuerde que en reaccionar, la parte JSX se vuelve a renderizar y se calcula el campo de valor. Escríbalo y verá cuándo cambia realmente el valor de input1 y input2 y qué está asignando en cada renderizado.