javascript - react-hook-form:handleSubmit 不是函数

Question

我想使用 react-hook-form 来处理来自用户的输入。 React 给我一个错误，说“handleSubmit 不是一个函数”。任何帮助将不胜感激。

我的代码如下(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;

Answer 1

为每个带有name的input传递这个以便注册:

{...register("rating")}

引用:https://react-hook-form.com/api/useform/register