0
193
ViewsCómo usar la casilla de verificación en formularios y controlar los campos de entrada
Tengo un formulario y obtengo datos de solutestate y la salida se envía al primer cuadro de entrada usando value={solutestate} pero quiero alternar la salida usando la casilla de verificación en el cuadro de entrada
Objetivo: cuando marque la casilla de verificación, el valor de solutestate debe estar en el primer cuadro de entrada y, si no está marcado, la salida del solutestate debe estar en el segundo cuadro de entrada.
const [state, setState] = useState(false); const [solutestate, setSoluteState] = useState(); <input className="mr-2 leading-tight" type="checkbox" onChange={setState} /> <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-x-4" > <input className="shadow" {...register("solute")} placeholder="SOLUTE" onChange={(e) => setSoluteState(e.target.value)} value={solutestate} /> <input className="shadow" {...register("solvent")} placeholder="SOLVENT" /> </form> 
·
Juan Pablo Isaza
2 answers
Answer question0
Pruebe el siguiente ejemplo. inicialmente, dado que la casilla de verificación no está marcada, el valor estará en la segunda entrada.
const [solutestate, setSoluteState] = useState(""); const [input1, setInput1] = useState(""); const [input2, setInput2] = useState(""); const [syncToFirst, setSyncToFirst] = useState(); <input className="mr-2 leading-tight" type="checkbox" onChange={(event)=>{syncToFirst(event.target.checked?1:2)}} /> <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-x-4" > <input className="shadow" {...register("solute")} placeholder="SOLUTE" onChange={(e) => syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value)} value={syncToFirst === 1 ? solutestate : input1} /> <input className="shadow" {...register("solvent")} placeholder="SOLVENT" onChange={(e) => syncToFirst === 2 ? setSoluteState(e.target.value) :input2(e.target.value)} value={syncToFirst === 2 ? solutestate : input2} />
·
Juan Pablo Isaza
Report
0
Try the code below. This should work const [solutestate, setSoluteState] = useState(""); const [input2, setInput2] = useState(""); <input className="mr-2 leading-tight" type="checkbox" onChange={(event)=>{event.target.checked && setInput2(solutestate)}} /> <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-x-4" > <input className="shadow" {...register("solute")} placeholder="SOLUTE" onChange={(e) => setSoluteState(e.target.value)} value={solutestate} /> <input className="shadow" {...register("solvent")} placeholder="SOLVENT" onChange={(e) => input2(e.target.value)} value={input2} />
·
Juan Pablo Isaza
Report
Answer question