如何驗證並發送反應表單數據以觸發基礎數據庫？

Question

我嘗試了但不工作

    import React from "react";
    import "./App.css";
    import { useForm } from "react-hook-form"; 
    import classNames from "classnames";
    import { useState } from "react";
    
    
    
    function App() {
      const { register, handleSubmit,formState: { errors } } = useForm();
      // console.log(errors);
      const onSubmit = data => console.log(JSON.stringify(data));


const postData = async (e)=>{
    e.preventDefault();
    const res = await fetch("https://test1-5022f-default-rtdb.firebaseio.com/reactformData.json",
    {
      method:"POST",
      header:{
        "content-type":"application/json",

      },

我在這里傳遞什么？

 body:JSON.stringify(data)
    }
    
    )
  };

我的表單中有很多字段，但在這里我展示了一些

return (
    <div>

<div className="container">
      
      <div className="form-group my-3 ">
        <form name="Registration_form" id="Form" action="" method="POST" onSubmit={handleSubmit(onSubmit)}>
          
          <div className="form-group my-3">
            <label htmlFor="name">Name:</label>
           
            <input 
              type="text" 
              name="Name" 
              id="Name" 
              className={classNames("form-control",{"is-invalid":errors.Name,})}  
              autoComplete="off" 
              {...register('Name', 
              { required: true,
                maxLength: 15,
                pattern: /^[A-Za-z]+$/
              
              })
              }

              
              />

            <span id="name" className="text-danger fw-bold">{errors.Name?.type === "required"  && "This field is required"}</span>

            <span id="name" className="text-danger fw-bold">{errors.Name?.type ==="maxLength" && "Length Should be less then 15"}</span>

            <span id="name" className="text-danger fw-bold">{errors.Name?.type === "pattern"  && "Digits are not allow"}</span>

          </div>

  </div>
      <div className="form-group my-3">
        <label htmlFor="email">Email: </label>
        
        <input 
          type="text" 
          name="email" 
          id="email" 
          className={classNames("form-control",{"is-invalid":errors.email,})}  
          placeholder="email@example.com" 
          autoComplete="off" 
          {...register('email', 
          { 
            required: true,
            pattern:/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
            
          
          })
          }
        
          />

          <span id="mail" className="text-danger fw-bold">{errors.email?.type === "required"  && "Email is required"}</span>

          <span id="mail" className="text-danger fw-bold">{errors.email?.type === "pattern"  &&"Invalid format"}</span>

       
      </div>
<input type="submit" id="submit" value="submit" onClick={postData} className="btn btn-success my-3" />
        </form>

那是我嘗試的代碼，但它沒有工作任何人審查它並給出您寶貴的意見和建議基本上我想使用反應鈎子表單進行表單驗證，它完成但是當我在使用時卡住傳遞數據以觸發基礎數據庫時，然后使用useState它的覆蓋是因為反應鈎子形式已經存儲了它但是如何在沒有useState的情況下將它傳遞給數據庫？ 通過 react hook 形式

Answer 1

您應該從提交按鈕中刪除onClick並從表單上的onSubmit事件處理表單提交。 像這樣從onSubmit function 將表單數據發送到 firebase 端點。

<input type="submit" id="submit" value="submit" onClick={postData}  <-- Remove this
className="btn btn-success my-3" />

...

const onSubmit = (data) => {
    // All your form fields will the converted to json object (data)
    // and will be handled by hooks form
    console.log(data); 
    // send data to firebase API
    const responseRaw = fetch(
      "https://your-firebase-url",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      }
    );
    const response = responseRaw.json();
   
  };