React Hook Form 错误不适用于 Chakra UI

问题描述

我正在尝试使用 ChakraUI 和 React-Hook-Form 创建我的表单。但是，我的错误不起作用。我试过不使用 chakra ui 但它仍然不起作用。这是我的代码：

import React from 'react'
import { useForm } from "react-hook-form";
import "./App.css"
import { Input } from "@chakra-ui/react"
import { Text } from "@chakra-ui/react"
import {
    Alert,AlertIcon,AlertTitle,AlertDescription,} from "@chakra-ui/react"


function App() {

    const { register,handleSubmit,errors } = useForm();
    const onSubmit = data => console.log(data);

    return (
        <div className="app-container">
            <form onSubmit={handleSubmit(onSubmit)}>
                <div className="header-container">
                    <Text fontSize="3xl" align="center" className="app-header">Finish the survey</Text>
                </div>
                <div className="email">
                    <Text fontSize="xl">Your Email</Text>
                    <Input name="email" placeholder="Your Email..." type="text" ref={register({ maxLength: { value: 23,message: "test" } })} />
                    {errors.email && (<span>{errors.email.message}</span>)}
                </div>
            </form>
        </div>
    )
}

export default App

解决方法

在不知道您使用的库版本的情况下，我不能肯定，但请尝试更改

const { register,handleSubmit,errors } = useForm();

到

const { register,formState: { errors } } = useForm();

当我在图书馆网站主页上关注他们的例子时遇到了同样的问题，并且已经提交了 PR。