Question

我是React的新手，我正在尝试使用React钩子形式在App.js中进行编码，但是我一直遇到错误。我对该应用程序的目标只是一个简单的注册表单，这样我就可以将用户的数据保存到JSON中并将其保存到数据库中。 React Hook Form使这个过程非常容易，但是我不知道如何使用钩子在两个javascript文件之间传递信息。

Error message

此刻，我的App.js看起来像

import React, {useState, useEffect} from 'react';
import {useForm} from "react-hook-form";
import SignUp from "./views/SignUp/SignUp";

const App = (props) => {

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


    return (
        <div>
            <SignUp

                register = {register}
                handleSubmit = {handleSubmit}
                errors = {errors}



            />

        </div>
    );
};


export default App;

我的SignUp.js看起来像

import React from 'react';

const SignUp = (props) => {




    const onSubmit = (data) => {

        console.log(data);
    };



    return (
        <form onSubmit={props.handleSubmit(onSubmit)}>
            <input type="text" placeholder="First name" name="First name" ref={props.register({required: true, maxLength: 80})} />
            <input type="text" placeholder="Last name" name="Last name" ref={props.register({required: true, maxLength: 100})} />
            <input type="datetime" placeholder="Date Of Birth" name="Date Of Birth" ref={props.register} />
            <input type="search" placeholder="Location of Birth" name="Location of Birth" ref={props.register} />
            <input type="time" placeholder="Time of Birth" name="Time of Birth" ref={props.register} />
            <input type="text" placeholder="Email" name="Email" ref={props.register({required: true, pattern: /^\S+@\S+$/i})} />
            <input type="tel" placeholder="Mobile number" name="Mobile number" ref={props.register({required: true, minLength: 6, maxLength: 12})} />
            <input type="text" placeholder="Username" name="Username" ref={props.register} />
            <input type="text" placeholder="Password" name="Password" ref={props.register} />
            <input type="submit" />

        </form>
    );

};

export default SignUp;

任何对此的帮助都会很棒。

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。在App.js中使用react-hook-form时出错

0 个答案: