Stack Overflow en español Asked by Paulo Urbano Rivera on November 13, 2021
Amig@s, estoy tratando de implementar react-hook-form a mi aplicación pero estoy teniendo un inconveniente al querer actualizar el state
, ya que al momento de dar click en el submit
los valores de los inputs efectivamente llegan a la function, pero cuando trato de pasar esos valores a un const [values, setValues] = useState({})
este no se actualiza, y más extraño aun es que si vuelvo a hacer click en el submit si lo hace como debería.
Les adjunto el código y el codesandbox para que puedan replicarlo
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
export default function App() {
const { register, errors, handleSubmit } = useForm();
const [values, setValues] = useState({});
const onSubmit = (data, event) => {
alert(JSON.stringify(data));
console.log(`before set -> ${JSON.stringify(values)}`);
setValues(data);
console.log(`after set -> ${JSON.stringify(values)}`);
};
return (
<React.Fragment>
<form onSubmit={handleSubmit(onSubmit)} noValidate>
<input
type="text"
name="user"
ref={register({
required: { value: true, message: "El campo no puede estar vacio" }
})}
/>
<span>{errors?.user?.message}</span>
<br />
<input
type="password"
name="pass"
ref={register({
required: { value: true, message: "El campo no puede estar vacio" }
})}
/>
<span>{errors?.pass?.message}</span>
<br />
<button type="submit">Guardar</button>
</form>
</React.Fragment>
);
}
Ignoro si estoy abordando mal el problema o al utilizar este package, la forma de trabajar con hooks
cambia un poco.
Como siempre, cualquier orientación la agradezco!
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP