Quiero usar react-hook-form para manejar la entrada del usuario. React me da un error que dice "handleSubmit no es una función". Cualquier ayuda sería apreciada.
Mi código es el siguiente ( react-hook-form 7.13.0 )
import { useForm } from "react-hook-form"; import axios from "axios"; import styled from "styled-components"; const Style = styled.div` .form { width: 200px; display: flex; flex-direction: column; } `; const Add = (props) => { const { register , handleSubmit } = useForm(); const onSubmit = (e, data) => { e.preventDefault(); console.log(data); addReview(data); } const addReview = (data) => { axios.POST("http://localhost:3000/reviews", data).then(() => { props.setReviews([...props.reviews, {data}]) }) } return ( <Style> <h3>Add a review</h3> <form className="form" onSubmit={handleSubmit(onSubmit)}> <input type="text" placeholder="Book Title" ref={register}></input> <input type="text" placeholder="Rating" ref={register}></input> <input type="text" placeholder="Review" ref={register}></input> <input type="submit" placeholder="Review"></input> </form> </Style> ) }; export default Add;¿Puedes probar esto...?
const Add = (props) => { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); addReview(data); }; const addReview = (data) => { axios.POST("http://localhost:3000/reviews", data).then(() => { props.setReviews([...props.reviews, { data }]); }); }; return ( <Style> <h3>Add a review</h3> <form className="form" onSubmit={handleSubmit(onSubmit)}> <input type="text" placeholder="Book Title" {...register("bookTitle")} ></input> <input type="text" placeholder="Rating" {...register("rating")}></input> <input type="text" placeholder="Review" {...register("review")}></input> <input type="submit" placeholder="Review"></input> </form> </Style> ); };Pase esto para cada input con el name para registrarse:
{...register("rating")}Referencia: https://react-hook-form.com/api/useform/register
Tienes un error tipográfico.
Esto es lo que tienes actualmente:
<form className="form" onSubmit={handleSubmit(onSubmit)}> Llamas a handleSubmit(onSubmit) pero supongo que estás tratando de usar onSubmit como controlador. Reemplace la línea de arriba con esto:
<form className="form" onSubmit={onSubmit}>