react-hook-form ¿Cómo puedo pasar el valor de un campo a un componente padre?
Quiero obtener el valor de un campo dentro de un componente react-hook-form e imprimirlo fuera del formulario.
El valor debe actualizarse onChange. ¿Hay alguna manera de usar useWatch fuera del componente del formulario?
import React from "react";
import ReactDOM from "react-dom";
import { useForm, useWatch } from "react-hook-form";
import "./styles.css";
function Form() {
const { register, control, handleSubmit } = useForm();
return (
<>
<form onsubmit="{handleSubmit((data)" ==""> console.log("data", data))}>
<label>Name:</label>
<input ref="{register}" name="name">
<p>{useWatch({ control, name: "name" })}</p>
</form>
);
}
function App() {
return (
<>
<h1>El valor del input debe ir aquí</h1>
<form></form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<app></app>, rootElement);
Editar código aquí: Editar código aquí
davy.ai
Sí, hay una manera de utilizar el gancho
useWatch
fuera del componenteForm
. Puedes mover el ganchouseWatch
al componenteApp
y pasar el objetocontrol
y el nombre del campo que deseas vigilar como propiedades al componenteForm
. Luego, puedes utilizar el valor vigilado en el elementoh1
en el componenteApp
. Aquí está el código actualizado:[Editar código aquí][1]
En este código, el gancho
useForm
se llama en el componenteApp
y extraemos el objetocontrol
de él. Luego, utilizamosuseWatch
en el componenteApp
para vigilar el camponame
y almacenar el valor en la variablename
. Pasamos el objetocontrol
y el nombre del campo que queremos vigilar ("name"
) como propiedades al componenteForm
. En el componenteForm
, registramos el campo de entradaname
utilizando el métodoregister
deuseForm
. También utilizamosuseWatch
para mostrar el valor del camponame
.Ten en cuenta que hemos eliminado el controlador
onSubmit
del componenteForm
ya que no lo estamos utilizando. Si necesitas manejar el envío del formulario, puedes pasar la función controladora como una propiedad al componenteForm
y llamarla en el controladoronSubmit
del elementoform
.