React JS中阻止表单提交刷新页面 实现表单无刷新提交

你在提交函数中添加e.preventDefault()仍触发整页刷新，结合代码来看是以下几个问题导致的：

• 事件对象使用错误：submit事件中e.target指向的是实际触发提交的子元素（点击提交按钮时是提交按钮、输入框按回车时是文本输入框），而非绑定onSubmit的form元素。你代码中const { name } = e.target.dataset这行在部分场景下会抛出未捕获错误，部分浏览器在事件处理函数出现未捕获异常时，会放弃执行阻止默认行为的逻辑，回退触发原生表单提交刷新页面。
• 组件写法不规范：输入框同时使用defaultValue绑定state和onChange更新state，属于混用受控/非受控组件写法，React会抛出警告，极端场景下会导致事件绑定逻辑异常。
• 缺少事件冒泡拦截：如果当前组件外层嵌套了其他原生form元素，提交事件冒泡到外层时也会触发外层表单的默认提交行为。

1. 把阻止默认行为、阻止冒泡的逻辑放在事件处理函数最开头，避免后续逻辑报错影响拦截效果。
2. 统一使用e.currentTarget获取绑定事件的form元素，该属性永远指向绑定了事件监听的元素本身，不会随触发源变化。
3. 将输入框改为标准受控组件，用value替代defaultValue绑定状态值。
4. 移除无效的未使用变量、冗余逻辑，提交成功后清空输入框优化交互。

import { useState } from "react";
import axios from "axios";
export default function Add() {
  const [close, setClose] = useState(false);
  const [allValues, setallValues] = useState("");

  function closeDialog() {
    setClose(true);
  }
  function changeHandler(e) {
    setallValues(e.target.value);
  }
  const submitValue = (e) => {
    // 优先拦截默认行为和事件冒泡
    e.preventDefault();
    e.stopPropagation();

    const postData = {
      add: allValues,
    };
    const headers = {
      Authorization: `token ` + localStorage.getItem("token"),
    };

    axios
      .post("apiadd/", postData, { headers })
      .then(() => {
        alert("submitted");
        setallValues(""); // 提交成功清空输入框
      })
      .catch((error) => {
        alert("Cannot add again");
      });
  };

  return (
    <>
      {!close && (
        <div style={styles.cover}>
          <h3>Add New</h3>
          <hr />
          <form style={styles.form} onSubmit={submitValue}>
            <span>add</span>
            <input
              style={styles.input}
              type="text"
              onChange={changeHandler}
              value={allValues}
            />
            <input style={styles.sbtn} type="submit" value="ADD" />
          </form>
          <button style={styles.dbtn} onClick={closeDialog}>
            Done
          </button>
        </div>
      )}
    </>
  );
}

• 打开浏览器控制台，提交表单时无红色报错
• 提交过程中页面URL无变化，不会触发整页重载
• 浏览器Network面板可以看到对应apiadd/的POST请求正常发出
• 提交成功后输入框自动清空，弹出对应提示

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