react-hook-form

React - My form is submitting empty data because 'e' and 'data' are declared but never used?

房东的猫 提交于 2021-02-11 06:30:12
问题 I'm trying to implement a form using react-hook-form. I'm not able to actually connect the data and event working correctly. As the docs state, I'm using the handleSubmit function from the react-hook-form library, with my custom Axios post as the onSubmit parameter: onSubmit={handleSubmit(onSubmit) According to my Vscode, the data and event are not registering correctly const onSubmit = (data, e) => {} . When the form is submitted, the web console logs an empty form: {email: "", password: ""}

How to get input field value on link click?

白昼怎懂夜的黑 提交于 2021-01-29 21:20:16
问题 I am generating my form dynamically using json.but I struck at one place while getting value of input field on click. When My demo application run .it shows a input field ( where user enter a mobile number) and a button (text send OTP).After entering number example (9891234178) and press enter it shows OTP field and a link resend OTP . I want to capture click handler of link (Resend otp) on click I want to get my input field value (mobile number value). Can It is possible to get value ? Here

How to conditionally disable the submit button with react-hook-form?

萝らか妹 提交于 2021-01-28 13:02:15
问题 Couldn't find a solution. I'm using react-hook-form and I want to disable the submit button when the forms are empty and enable as long as all forms have atleast something written in them. How would I do that using react-hook-form ? 回答1: you can use formState => isDirty which means form is been modified. https://react-hook-form.com/api#formState here is a working example for formState below: https://codesandbox.io/s/react-hook-form-v6-formstate-ht098?file=/src/index.jsx:423-432 <input disable

How to conditionally disable the submit button with react-hook-form?

删除回忆录丶 提交于 2021-01-28 13:01:52
问题 Couldn't find a solution. I'm using react-hook-form and I want to disable the submit button when the forms are empty and enable as long as all forms have atleast something written in them. How would I do that using react-hook-form ? 回答1: you can use formState => isDirty which means form is been modified. https://react-hook-form.com/api#formState here is a working example for formState below: https://codesandbox.io/s/react-hook-form-v6-formstate-ht098?file=/src/index.jsx:423-432 <input disable

DefaultValues of react-hook-form is not setting the values to the Input fields in React JS

早过忘川 提交于 2021-01-27 20:30:01
问题 I want to provide default values in the input field using react-hook-form . First I retrieve the user data from the API endpoint and then setting the state users to that user data. Then I pass the state users to the defaultValues of useForm() . import React, { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import axios from "axios"; function LoginFile() { const [users, setUsers] = useState(null); useEffect(() => { axios .get("http://localhost:4000/users/1")

how to make react-hook-form work with multiple forms in one page?

萝らか妹 提交于 2021-01-26 03:09:09
问题 I am using react-hook-form in my project and I have 2 totally separate forms, but when I submit one of the forms and if some fields in the other form is required I can't submit the current form, check the demo, and try to submit one of the form, the forms should work independently of each other but it looks like they depend on each other. any help please? 回答1: Welcome to StackOverflow @webcoder You are using the same hook instance for both forms. You will have to reuse with different names.

How to use Material-UI Select with React Hook Form

大兔子大兔子 提交于 2020-12-26 08:24:05
问题 I've built a form in React using MUI and React Hook Form. I'm trying to create a custom TextField element that works as a Select Input . I would like it to be an uncontrolled component with a Ref prop. I've tried to pass the inputRef prop as the MUI and React Hook Form docs recommend but with no success. <TextField id="id" name="name" select native="true" className={classes.textField} label="label" margin="normal" variant="outlined" inputRef={register({ required: "Choose one option" })} error

How to change React-Hook-Form defaultValue with useEffect()?

假装没事ソ 提交于 2020-12-06 04:41:53
问题 I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form. I put the fetched value into defaultValue of <Controller /> . However, it is just not showing in the text box. Here is my code: import React, {useState, useEffect, useCallback} from 'react'; import { useForm, Controller } from 'react-hook-form' import { URL } from '../constants'; const

How to change React-Hook-Form defaultValue with useEffect()?

北城余情 提交于 2020-12-06 04:39:17
问题 I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form. I put the fetched value into defaultValue of <Controller /> . However, it is just not showing in the text box. Here is my code: import React, {useState, useEffect, useCallback} from 'react'; import { useForm, Controller } from 'react-hook-form' import { URL } from '../constants'; const