React使用react-hook-form时编辑/保存同按钮误提交表单问题

• 目标功能：实现单按钮双状态切换
  • 非编辑模式：按钮显示Edit，点击进入编辑状态
  • 编辑模式：按钮显示Save，点击提交表单
• 异常表现：按钮显示Edit时点击会直接触发表单提交，不符合预期
  原始实现代码：

import "./styles.css";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@material-ui/core";

export default function App() {
  const [isEditing, setIsEditing] = useState(false);

  const handleEnterEditMode = () => {
    setIsEditing(true);
    console.log("Edit mode entered.");
  };

  const handleSave = () => {
    console.log("Form submitted.");
  };

  const {
    register,
    formState: { errors },
    handleSubmit,
    control,
    reset
  } = useForm();

  return (
    <div className="App">
      <form noValidate onSubmit={handleSubmit(handleSave)}>
        <Button
          {...(isEditing ? { type: "submit" } : {})}
          {...(!isEditing ? { onClick: handleEnterEditMode } : {})}
        >
          {!isEditing ? "Edit" : "Save"}
        </Button>
      </form>
    </div>
  );
}

HTML 规范明确规定：位于<form>标签内的<button>元素如果没有显式指定type属性，默认type值为submit，点击时会自动触发表单提交。
当前代码非编辑状态下没有给Button组件传入type属性，Material UI会将该属性直接透传到底层原生button元素，即使绑定了进入编辑模式的点击事件，浏览器默认的表单提交行为仍会触发，导致异常。

非编辑状态下显式给按钮设置type="button"，阻断默认提交行为；仅在编辑状态下将按钮type设为submit。
替换原代码中Button的属性配置即可，其余逻辑无需改动：

<Button
  type={isEditing ? "submit" : "button"}
  onClick={!isEditing ? handleEnterEditMode : undefined}
>
  {!isEditing ? "Edit" : "Save"}
</Button>

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