Ask Your Question

How can React-hook-form be utilized to detect changes made to an input value using buttons in React/Typescript?

asked 2023-05-26 06:19:04 +0000

lakamha gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2023-05-26 06:42:01 +0000

ladyg gravatar image

To detect changes made to an input value using buttons in React/Typescript with React-hook-form, you can use the watch method from the hook. Here is an example of how this can be implemented:

import React from "react";
import { useForm } from "react-hook-form";

type FormData = {
  inputOne: string;
  inputTwo: string;

const ExampleForm: React.FC = () => {
  const { register, watch, handleSubmit } = useForm<FormData>();

  // Watch for changes in inputOne
  const inputOne = watch("inputOne");

  // Handle form submit
  const onSubmit = (data: FormData) => {

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="inputOne">Input One</label>
      <input id="inputOne" name="inputOne" ref={register} />

      <label htmlFor="inputTwo">Input Two</label>
      <input id="inputTwo" name="inputTwo" ref={register} />

      <button type="button" onClick={() => console.log(inputOne)}>
        Log Input One

      <button type="submit">Submit</button>

export default ExampleForm;

In this example, we first define the shape of our form data using the FormData type. We then use the useForm hook to initialize our form with register for each input field. We also use the watch method to listen for changes in inputOne.

We then define our onSubmit function to handle form submissions.

Finally, we render our inputs, along with two buttons. The first button logs the current value of inputOne when clicked, and the second button is used to submit the form.

By using the watch method, we're able to easily detect changes made to our input values using buttons in React/Typescript with React-hook-form.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2023-05-26 06:19:04 +0000

Seen: 1 times

Last updated: May 26