天道酬勤,学无止境

react-hook-form

How to make form with POST method by using React Hook Form?

I redesigned form on page. I rewrote it with react-hook-form. New API isn’t ready, I can’t submit form without reloading. So how is to confirm this with this library? Can I make form with POST method?

2022-05-03 06:38:16    分类:问答    react-hook-form   react-forms

React Hook Form Controller Issues

I have been using react hook form library with native elements but would like to switch to custom components using the Controller API. I am having an issue with my custom input component updating React state but not updating the ref inside the form state. Thus, a required field is always marked as invalid and I cannot submit my form. Here is a demo of my issue: https://codesandbox.io/s/react-hook-form-controller-bofv5 It should log out form data upon submission - but submission never happens because form is not valid.

2022-05-03 04:28:52    分类:问答    javascript   reactjs   react-hooks   react-hook-form

ForwardRef warning React-hook-forms with Material UI TextField

I am trying to build a form with react-hook-forms with Material UI's inputs (my custom variant of TextField in this case). Although the form seems to work completely fine, it triggers a warning message in the console when rendering the form. Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? I am using react-hook-form's Controller to wrap my TextField (as suggested by the docs) Any suggestions or solutions are very welcome! Below both the TextField component and the form where this issue occurs: Component TextField

2022-05-02 14:05:13    分类:问答    reactjs   material-ui   react-hook-form

How to return value state from material-ui <Switch /> using inputProps

https://codesandbox.io/s/compassionate-mountain-qwrbg I am modifying Switch component from @material-ui/core. I am trying to fetch the value = state in a json feed, together with the other attributes from form text fields. For simplicity I have deleted the other form input: textfield etc.. from the code. In the <Switch inputProps={{ "aria-label": "subscribe", "value": "state" }}/> I fetch value set to string: state, but I need to fetch the boolean: switch: true I have tried to set switch: boolean in the interface IFormInput, but then I don't receive any json feed in console. How can I get the

2022-05-02 04:25:20    分类:问答    reactjs   material-ui   uiswitch   react-hook-form   react-typescript

React Hook Form with file just submitting fakepath

I'm trying to add an <Input type="file" to my react-hook-form, but it submit a C:\fakepath when I submit the form. import React from "react"; import { Controller, useForm } from "react-hook-form"; import { Button, Form, Label, Input } from "reactstrap"; const App = () => { const { handleSubmit, control, setValue, formState: { errors } } = useForm(); const submitData = (data) => { console.log(data); }; return ( <div className="row"> <div className="col-sm-12 col-md-12 col-xl-12"> <Form onSubmit={handleSubmit(submitData)}> <div className="row"> <div className="col-sm-6"> <Label for="file">File<

2022-05-02 01:09:37    分类:问答    reactjs   file   react-hook-form

Faced this error while using React-Hook-Form and YupResolver: Attempted import error: 'set' is not exported from 'react-hook-form' (imported as 'o')

I'm developing an app using Capacitor, Ionic, React and recently I faced the following error, while using React Hook Form and YupResolver for the first time: When I try to run the project, I get this error: Failed to compile ./node_modules/@hookform/resolvers/dist/resolvers.module.js Attempted import error: 'set' is not exported from 'react-hook-form' (imported as 'o'). I want to create and validate a form for changing Password, submitting the new Password to an external API /change-password. The form will be like below: Actual Password: ... New Password: ... Confirm new Password: ... Submit

2022-05-01 05:33:05    分类:问答    reactjs   typescript   ionic-framework   yup   react-hook-form

How to use react-hook-form with ant design or material UI

I'm trying to use react-hook-form library to validate a form. When I render view using ant design or material UI, it does not work correctly. <Input name="firstName" ref={register({ required: true })} /> {errors.firstName && 'First name is required'} Some warning happened: "Missing name at.....".

2022-04-29 18:31:04    分类:问答    reactjs   material-ui   antd   react-hook-form

React Hook Form Dynamic Require

Good Day All, Im using react hook form and I want set required dynamically on one text-input. I have a useState that tracks the delivery method and radio buttons that update that state. And then the text-input required should be based dynamically on that state. So if the delivery method is "Delivery" we require your address if its "Pickup" we dont require your address. I hope that makes sense. In the code below the show/hide functionality works as expected however the dynamic require does not. const [ delivery, setDelivery ] = useState(false); <InfoBlock> <strong>Delivery Method</strong>

2022-04-29 13:47:14    分类:问答    validation   react-hook-form

Getting Uncaught TypeError: path.split is not a function in react

I'm trying to do validations for my form in react. I chose "react-hook-form" library. But I'm constantly getting error "Path.split is not a function. Even after using the default example given in their website, I'm getting the same error. This is the default code given in the official site. import React from "react"; import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, errors } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // watch input value by passing the name of it return ( {/*

2022-04-26 12:39:36    分类:问答    react-hook-form

Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'

I am trying to bind a react hook form on radio and radio group. However, I get following issue Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'. TS2339 This is the code import { Radio as $Radio } from 'antd'; import { RadioProps, RadioChangeEvent } from 'antd/lib/radio'; import { Controller } from 'react-hook-form'; import { InputProps } from './types'; const Radio = React.forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => { const { id, name, label, control } = props; return ( <> <Controller name={name} control=

2022-03-23 08:39:51    分类:问答    javascript   reactjs   typescript   antd   react-hook-form