如果出现错误，请阻止发送表单

Question

包含我的组件的沙箱：https://codesandbox.io/s/fancy-star-7gite

您好，我尝试在 React.js 中编写一个联系表单，用于检查输入值是否正确，并通过 email.js 将其发送到邮箱。验证文件示例（validateInfo.jsx）：

    if(!values.email) {  
        errors.email= "Enter an e-mail";
    } else if (!/\S+@\S+\.\S+/.test(values.email)){
        errors.email= "Enter a valid email";
    }

但在提交表单时，即使值错误，它也会发送表单。我想阻止它。

为了将表单传输到邮箱，我创建了一个挂钩来管理表单中信息的发送 (useContact.jsx)：

import {useState, useEffect} from 'react'
import emailjs from "emailjs-com";
import  {template}  from "./template";
import  {userId}  from "./userid";

export const useContact = (callback, validate) => {
    const [values, setValues] = useState({
        email:'',
        emailConf:'',
        userName:'',
        phone:'',
    })
    const [errors, setErrors] = useState({})
    const [isSubmitting, setIsSubmitting] = useState(false)
    
    const handleChange = e =>{
        const {name, value}= e.target
        setValues({
            ...values,
            [name]: value
        })
    }

    function handleSubmit(e) {
        e.preventDefault() 

        setIsSubmitting(true)
        setErrors(validate(values))
            emailjs.sendForm('gmail', template, e.target, userId)
            .then((result) => {
                console.log(result)
            }, (errors) => {
                console.log(errors);
            });

        e.target.reset();
        localStorage.clear();   
    }
    useEffect(() =>{
        if(Object.keys(errors).length === 0 && isSubmitting)
        {
            callback();
        }
    },[errors])

    return {handleChange, handleSubmit, values, errors};
}

表格（ContactInfo.jsx）：

import './Contact.css';
import { useContact } from "./useContact";
import validate from './validateInfo';

export default function ContactInfo({submitForm}) {


    const {handleChange, values, handleSubmit, errors}
    = useContact(
        submitForm,
        validate
    )
   
  return (<> 
    <div className="contact-container">

      <div className="contactForm" >

        <form className="Contact" onSubmit={handleSubmit} >
    
          <input 
          id="email" 
          name="email" 
          type="email" 
          value={values.email}
          onChange={handleChange}
          className="form-input" 
          placeholder="E-mail"  
          minLength= '5' 
          maxLength ='50' 
          autoComplete="off"/>
         {errors.email && <p> {errors.email} </p>}
         
          <input 
          name="emailConf" 
          id="emailConf" 
          type="email" 
          value={values.emailConf}
          onChange={handleChange}
          className="form-input" 
          minLength= '5' 
          maxLength='50' 
          autoComplete="off"
          placeholder="E-mail confirmation"/>
         {errors.emailConf && <p> {errors.emailConf} </p>}

          
          <input 
          name="userName" 
          id="userName"
          value={values.userName}
          onChange={handleChange} 
          className="form-input" 
          maxLength='50' 
          autoComplete="off"
          placeholder="Name"/>

          <input 
          name="phone" 
          id="phone" 
          type="tel"
          value={values.phone}
          onChange={handleChange}
          className="form-input"
          maxLength='10' 
          autoComplete="off"
          placeholder="Phone Number"/>
         {errors.phone && <p> {errors.phone} </p>}

          
          <textarea 
          className="message" 
          name="message" 
          maxLength='500' 
          placeholder="Write your message here..." />
          
          <button className="submit-Btn" type="submit">
          Send
          </button>

           
        </form>

      </div>
    
    </div>
    </>
  );
}

感谢您帮助我，如果您想了解更多信息，请告诉我 =)。

Answer 1

您在提交方法中缺少一个条件。您没有验证验证中是否有任何错误。应该如下。也更新了代码框

function handleSubmit(e) {
    e.preventDefault();

    setIsSubmitting(true);
    setErrors(validate(values));
    if (validate(values) === {}) {
      emailjs.sendForm("gmail", template, e.target, userId).then(
        (result) => {
          console.log(result);
        },
        (errors) => {
          console.log(errors);
        }
      );

      e.target.reset();
      localStorage.clear();
    }
  }