La validación del formulario no funciona con React strap y React hook form versión 7. En el proyecto sandbox anterior, cuando hago clic en el botón Enviar sin ingresar el texto en la entrada de biografía, se requiere un campo de biografía de error. luego, cuando escribo en ese campo, el mensaje de error no desaparece. La versión 7 funciona muy bien con formularios y elementos HTML normales. pero teniendo algún conflicto con reactstrap.
Versión de React: 17.2 Versión de forma de gancho de React: 7.22 Versión de Reactstrap: 9.0
import "./styles.css"; import { Form, FormGroup, Input, Label, Button } from "reactstrap"; import * as Yup from "yup"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; export default function App() { const schema = Yup.object().shape({ bio: Yup.string().required() }); const { register, handleSubmit, reset, formState: { errors } } = useForm({ resolver: yupResolver(schema) }); const submitHandle = (data) => { console.log(data); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}> <FormGroup> <Label for="bio">Bio</Label> <Input id="bio" name="bio" type="text" {...register("bio")} /> {errors.bio && <p className="invalid">{errors.bio.message}</p>} </FormGroup> <FormGroup> <br/> <Button color="primary">Save</Button> </FormGroup> </Form> </div> ); }Zona de pruebas de código: https://codesandbox.io/s/ancient-smoke-0ccbn
No encontré nada en su enlace de sandbox, pero su problema se debe a la referencia, react-hook-form necesita acceder a la referencia de entrada, mientras que el componente de Input de reactstrap expone la referencia por la prop de referencia innerRef , por lo que hay dos soluciones para resuelve tu problema:
1- registre manualmente un campo como este:
default function App() { ... const {ref,...bio} = register('bio'); return ( <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}> <FormGroup> <Label for="bio">Bio</Label> <Input id="bio" name="bio" type="text" {...bio} innerRef={ref}/> {errors.bio && <p className="invalid">{errors.bio.message}</p>} </FormGroup> </Form> ); } 2- Utilice el componente Controller , que se encargará del proceso de registro, así:
default function App() { ... const { handleSubmit, reset, control, formState: { errors }, } = useForm({ resolver: yupResolver(schema), defaultValues: { bio: '' }, }); ... return ( <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}> <FormGroup> <Label for="bio">Bio</Label> <Controller id="bio" name="bio" control={control} render={({ field }) => <Input {...field} />} /> {errors.bio && <p className="invalid">{errors.bio.message}</p>} </FormGroup> </Form> ); }