React-Hook-Form 和 ReactJS 組件驗證

Question

請注意，我是 ReactJS 的新手（我只研究了 4 天）。

我有 3 個 JS 文件。

我正在嘗試在我的應用程序中實現React-Hook-Form 。

我已經盡可能多地遵循了主站點本身的示例代碼。 您可以在FormEntry.js部分看到它的嘗試。

如果沒有...register()代碼，我的應用程序按預期工作。 用戶輸入數據，它作為 API 調用的一部分提交，該調用根據輸入返回一些示例數據。

添加...register() ，主要是為了測試驗證，驗證本身有效：如果我的字段中沒有輸入，我無法提交表單並顯示錯誤消息。 但是，即使我在字段中輸入，驗證仍然失敗。

我哪里出錯了？

這些是我相關的 JS 代碼。（可能有點亂）

Create.js基本上是用戶進入我的站點時將看到的主頁面，該頁面顯示用於創建對象的輸入表單。

import { useState } from "react";
import FormEntry from '../components/FormEntry';

function CreatePage() {
    /*
    useState
    value1 = the value save
    value2 = the method to call to update value1
    */
    const [responseData, setData] = useState([]);

    function getCreateData(allData){
        console.log("getCreateData allData");
        console.log(allData);
        fetch(<API url>,{
            "method": 'POST',
            "body": JSON.stringify(allData),
            "headers":{
                "Content-Type": 'application/json'
            }
        })
        .then(res => res.json())
        .then(
            (result) => {
                setData(result);
                console.log(result);
            }
        );
    }

    return (
        <div>
            <h2 align="center" >Create Proposal</h2>
            <FormEntry responseInputData={getCreateData} />
        </div>
        
    );
}

export default CreatePage; //allows function to be useable by others

用戶所做的輸入將被解析到getCreateData函數中，它將在其中調用 API。 allData變量來自FormEntry.js組件，它構成了Create.js頁面的主體。

import { useRef } from "react";
import FieldEntry from "./FieldEntry";
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import SaveIcon from '@mui/icons-material/Save';

import { useForm } from "react-hook-form";

function FormEntry(props){
    const clientRef = useRef();
    const propRefNameRef = useRef();
    const { register, formState: { errors }, handleSubmit } = useForm();

    function submitData(event){
        event.preventDefault();

        const client = clientRef.current.value;
        const propRefName = propRefNameRef.current.value;

        const allData = {
            client: client,
            propRefName: propRefName,
        }

        props.responseInputData(allData);

    }

    return(
        <form className="formEntry" onSubmit={handleSubmit(submitData)}>
            <div class="row" >
                <table >
                    <FieldEntry label="Client" type="text" id="input_client" {...register("client", { required: true })} propsRef={clientRef} />
                    {errors.client?.type === 'required' && "Required Fields"}
                    <FieldEntry label="Proposal" type="text" id="input_propRefName" name="propRefName" propsRef={propRefNameRef} />
                </table>
            </div>
            <Button type="submit" variant="contained" align="center" size="small" startIcon={<SearchIcon />}>Search</Button>
        </form>
    )

}

FieldEntry.js被稱為可重用組件以填充FormEntry.js的字段

function FieldEntry(props){

    return(
        <tr>
            <td><label htmlFor={props.id}>{props.label}</label></td>
            <td><input type={props.type} name={props.name} id={props.id} ref={props.propsRef} /></td>
        </tr>
    )
}
export default FieldEntry;

Answer 1

register的返回值有一個onChange屬性，RHF 使用它來更新字段。 在您的示例中，您沒有在<FieldEntry />組件中使用此道具。

function FieldEntry(props){

    return(
        <tr>
            <td><label htmlFor={props.id}>{props.label}</label></td>
            <td><input type={props.type} name={props.name} onChange={props.onChange} id={props.id} ref={props.propsRef} /></td>
        </tr>
    )
}