React表单提交时event.preventDefault无法阻止页面刷新问题求助

你的代码存在多处逻辑错误，共同导致了页面刷新的现象：

• event.preventDefault() 调用时机错误：仅在校验通过的if分支内调用了该方法，校验失败进入else分支时没有阻止表单默认提交行为，浏览器触发原生表单提交导致页面刷新。需要将event.preventDefault()移到submit回调的第一行，无论校验是否通过都先阻止默认提交。
• 字段校验逻辑错误：使用||或运算符判断字段非空，只要任意一个字段不为空就进入发送逻辑，不符合「所有字段必填」的要求，需要改为&&与运算符，三个字段都非空才执行发送逻辑。
• else分支逻辑未生效：else后用括号包裹了未执行的箭头函数，setErrorMessage不会被调用，校验失败时无提示同时表单默认提交。需要去掉箭头函数包装，直接在else块内执行状态更新。
• 主动触发页面刷新：邮件发送成功的回调内主动调用了window.location.reload()，属于代码主动刷新页面，并非表单默认提交导致，不需要刷新可删除该行。
• 输入框回调参数缺失：所有输入控件的onChange回调未声明event入参，内部访问的event为undefined，导致状态无法正常更新，校验逻辑始终异常。

修正后完整代码 #

import React, { useState } from 'react';

export default function Contact(props) {
  const [ErrorMessage, setErrorMessage] = useState("")
  const [Name, setName] = useState("")
  const [Email, setEmail] = useState("")
  const [Message, setMessage] = useState("")

  function sendEmail(event) {
    // 优先阻止表单默认提交行为
    event.preventDefault();

    if (Name !== "" && Email !== "" && Message !== "") {
      emailjs.sendForm("service_5xus7sn", "template_aqto6xc", event.target, "user_XmVRJ4snvOeb3UJlvluDS")
        .then((result) => {
          console.log(result.text); 
          // 不需要提交后刷新可删除下一行
          // window.location.reload()
        }).catch(error => console.log("You have an error in user message submit" , error))
    } else {
      setErrorMessage("You must fill in each field before submitting.")
    }
  }

  return (
    <div className="contact-wrapper">
      <form className="form" onSubmit={sendEmail}>
          <div className="form-group">
                <input type="text" name="name" id="FullName" placeholder="Your name" onChange={(event) => setName(event.target.value)}/>
                <label htmlFor="FullName">Your name</label>
          </div>

          <div className="form-group">
                <input type="email" name="email" id="email" placeholder="Your email" onChange={(event) => setEmail(event.target.value)}/>
                <label htmlFor="email">Your email</label>
          </div>

          <div className="form-group">
                <textarea name="message" id="message" placeholder="Message" onChange={(event) => setMessage(event.target.value)}></textarea>
                <label htmlFor="message">Message</label>
          </div>

          <div className="spacer10"></div>

            <div className="error-message">
                <h3>{ErrorMessage}</h3>
            </div>

          <div className="centered-btn-wrapper">
              <button type="submit" className="btn" value="Send">Send</button>
          </div>
            
          <div className="spacer10"></div>
          <div className="spacer10"></div>
      </form>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Leak