Remix中如何获取fetcher.Form表单值并实现手动提交

架构老林

2026-7-10

在Remix中使用useFetcher表单时，避免回车提交并手动获取表单数据的方案

方案一：阻止回车触发提交，保留表单默认提交逻辑

这个方案最贴合fetcher.Form的设计初衷，无需手动处理表单数据，仅屏蔽回车触发的提交行为：

移除原有的onSubmit阻止逻辑和手动提交函数
在表单上添加onKeyDown事件，拦截回车键的默认行为
按钮保持type="submit"，点击时正常触发表单提交

const fetcher = useFetcher();

function handleKeyDown(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
  }
}

return(
    <fetcher.Form 
      action="/some/route" 
      method="post"
      onKeyDown={handleKeyDown}
    >
        <input name="input1" type="text"/>
        <input name="input2" type="text"/>
        <input name="input3" type="text"/>
     
        <button type="submit">Save</button>
    </fetcher.Form>
);

方案二：手动获取表单数据并调用`fetcher.submit`

如果需要先执行额外逻辑再提交，可以通过表单Ref获取原生表单元素，用FormDataAPI收集输入值，无需做受控组件：

给表单添加ref引用
将按钮改为type="button"，避免触发默认提交
在提交函数中通过Ref生成FormData，传入fetcher.submit

import { useRef } from "react";
const fetcher = useFetcher();
const formRef = useRef<HTMLFormElement>(null);

function realSubmit(){
  if (!formRef.current) return;
  const formData = new FormData(formRef.current);
  fetcher.submit(formData, { 
    action: "/some/route", 
    method: "post" 
  });
}

return(
    <fetcher.Form 
      ref={formRef}
      action="/some/route" 
      method="post"
    >
        <input name="input1" type="text"/>
        <input name="input2" type="text"/>
        <input name="input3" type="text"/>
     
        <button type="button" onClick={realSubmit}>Save</button>
    </fetcher.Form>
);