es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

react-hook-form ¿Cómo puedo pasar el valor de un campo a un componente padre?

02 Aug, 2023 Programación

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í

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera de utilizar el gancho useWatch fuera del componente Form. Puedes mover el gancho useWatch al componente App y pasar el objeto control y el nombre del campo que deseas vigilar como propiedades al componente Form. Luego, puedes utilizar el valor vigilado en el elemento h1 en el componente App. Aquí está el código actualizado:

    import React from "react";
import ReactDOM from "react-dom";
import { useForm, useWatch } from "react-hook-form";

import "./styles.css";

function Form({ control, watchName }) {
  const { register } = useForm();
  return (
    <>
      <form>
        <label>Nombre:</label>
        <<input ref="{register}" name="name">
      </form>
      {useWatch({ control, name: watchName })}

  );
}

function App() {
  const { control } = useForm();
  const name = useWatch({ control, name: "name" });
  return (
    <>
      <h1>El valor del input es {name}</h1>
      <form control="{control}" watchname="name"></form>

  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<app></app>, rootElement);

    [Editar código aquí][1]

    En este código, el gancho useForm se llama en el componente App y extraemos el objeto control de él. Luego, utilizamos useWatch en el componente App para vigilar el campo name y almacenar el valor en la variable name. Pasamos el objeto control y el nombre del campo que queremos vigilar ("name") como propiedades al componente Form. En el componente Form, registramos el campo de entrada name utilizando el método register de useForm. También utilizamos useWatch para mostrar el valor del campo name.

    Ten en cuenta que hemos eliminado el controlador onSubmit del componente Form ya que no lo estamos utilizando. Si necesitas manejar el envío del formulario, puedes pasar la función controladora como una propiedad al componente Form y llamarla en el controlador onSubmit del elemento form.

Comments are closed.