0
190
VistasCó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 Respuestas
Responde la pregunta0
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
Denunciar
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
Denunciar
Responde la pregunta