0
164
Visualizações¿Registrar un campo de entrada cambiante en forma de gancho de reacción?
Estoy tratando de registrar valores de un formulario usando react-hook-form. Todas las demás situaciones funcionan, sin embargo, obtengo un valor de retorno de 'indefinido' cuando intento recuperar datos de un valor que también es un gancho de reacción ( useState ).
const [quantity, setQuantity] = useState(1); const increaseQuantity = () => { setQuantity((prevQuantity) => prevQuantity + 1); }; const decreaseQuantity = () => { if (quantity > 1) { setQuantity((prevQuantity) => prevQuantity - 1); } }; const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; <DescriptionButtonsWrapper> <CounterContainer> <CounterWrapper> <CounterButtons onClick={decreaseQuantity}>-</CounterButtons> </CounterWrapper> <CounterWrapper> <CounterInput {...register("quantity")} placeholder="Quantity" id="quantity" type="number" > {quantity} </CounterInput> </CounterWrapper> <CounterWrapper> <CounterButtons onClick={increaseQuantity}>+</CounterButtons> </CounterWrapper> </CounterContainer> </DescriptionButtonsWrapper> <DescriptionButtonsWrapper> <Btn onClick={handleSubmit(onSubmit)}>Add to Cart</Btn> </DescriptionButtonsWrapper>
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede usar watch para realizar un seguimiento del valor del campo en el ciclo de vida de procesamiento y setValue para actualizar el valor del formulario de manera imperativa:
const { register, watch, handleSubmit, setValue } = useForm({ defaultValues: { quantity: 0 } }); const quantity = watch("quantity"); const increaseQuantity = () => setValue("quantity", quantity + 1); const decreaseQuantity = () => { if (quantity > 1) { setValue("quantity", quantity - 1); } }; useEffect(() => { console.log(quantity); }, [quantity]); return ( <form onSubmit={handleSubmit((data) => alert(JSON.stringify(data)))}> <button type="button" onClick={decreaseQuantity}> - </button> <button type="button" onClick={increaseQuantity}> + </button> <input {...register("quantity")} id="quantity" type="number" /> <input type="submit" /> </form> ); 
Referencias
·
Juan Pablo Isaza
Relatório
Responde à pergunta