输入值变更时提交表单触发页面刷新，preventDefault无效求助

用formRef.current.submit()触发表单提交时，不会触发React绑定的onSubmit回调函数，你写的e.preventDefault()根本没执行，浏览器会按照默认行为刷新页面。

这里提供几个可行的解决思路：

方案1：直接调用表单处理逻辑 #

把onSubmit里的核心逻辑抽成独立函数，在onChange里直接调用这个函数，无需触发表单提交：

// 抽离表单处理核心逻辑
const handleFormProcess = () => {
  // 原来onSubmit里的业务代码，比如获取表单数据、发送请求等
  console.log("处理表单数据");
};

// 表单组件
<form onSubmit={(e) => {
  e.preventDefault();
  handleFormProcess();
}}>
  <input onChange={handleFormProcess} />
</form>

方案2：监听原生submit事件 #

如果一定要用formRef.submit()触发提交，可以给表单添加原生submit事件监听，在原生事件里阻止默认行为：

import { useRef, useEffect } from 'react';

function YourForm() {
  const formRef = useRef(null);

  useEffect(() => {
    const formEl = formRef.current;
    if (!formEl) return;

    const handleNativeSubmit = (e) => {
      e.preventDefault();
      // 执行表单处理逻辑
      console.log("处理表单提交");
    };

    formEl.addEventListener('submit', handleNativeSubmit);
    // 组件卸载时移除监听
    return () => formEl.removeEventListener('submit', handleNativeSubmit);
  }, []);

  return (
    <form ref={formRef}>
      <input onChange={() => formRef.current?.submit()} />
    </form>
  );
}

方案3：用状态触发提交（推荐） #

通过React状态控制提交逻辑，更符合React的数据流模式：

import { useState, useEffect } from 'react';

function YourForm() {
  const [triggerSubmit, setTriggerSubmit] = useState(false);

  useEffect(() => {
    if (triggerSubmit) {
      // 执行表单处理逻辑
      console.log("处理表单提交");
      // 处理完成后重置状态
      setTriggerSubmit(false);
    }
  }, [triggerSubmit]);

  return (
    <form>
      <input onChange={() => setTriggerSubmit(true)} />
    </form>
  );
}

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