0
171
Viewsno se puede usar correctamente la casilla de verificación para completar el valor del estado en el campo de entrada
Tengo dos campos de entrada. cuando presiono la casilla de verificación, el valor de estado almacenado en solutestate debe estar en el primer cuadro de entrada. luego, si desmarco la casilla, se debe cambiar el valor en el segundo campo de entrada. Ambos cuadros de entrada deben tener un cambio de estado independiente. Adjunto un enlace de codesandbox que estoy tratando de editarSandbox link .
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() { const [input1, setInput1] = useState(""); const [input2, setInput2] = useState(""); const [syncToFirst, setSyncToFirst] = useState(); const [solutestate, setSoluteState] = useState(); const { register, handleSubmit, control } = useForm({ defaultValues: { solute: "", solvent: "" } }); const formData = new FormData(); 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" onChange={(event) => { setSyncToFirst(event.target.checked ? 1 : 2); }} /> <input className="mr-2 leading-tight" type="checkbox" onChange={(event) => { setSyncToFirst(event.target.checked ? 1 : 2); }} /> <form> <input {...register("solute")} placeholder="SOLUTE" onChange={(e) => syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value) } value={syncToFirst === 1 ? solutestate : input1} /> <input {...register("solvent")} placeholder="SOLVENT" onChange={(e) => syncToFirst === 2 ? setSoluteState(e.target.value) : input2(e.target.value) } value={syncToFirst === 2 ? solutestate : input2} /> </form> </div> ); } 
1 answers
Answer question0
No estoy seguro de seguirte, pero para empezar, debes poner los valores de las casillas de verificación en las variables de estado. Realmente no entiendo si le importa la secuencia de los controles, es decir, qué casilla de verificación se marcó en último lugar.
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> ); }Este código todavía es extraño, ¿podría explicar qué comportamiento desea de los campos de entrada de texto?