为什么表单属性不能像 html 按钮字段那样在 MUI 按钮上工作？

Question

我需要使用带有 zod 验证的 React hook 表单提交表单。但在我的情况下，提交按钮位于表单标记之外。所以我使用了id形式的方法。 （其他方法也请自行调整。）

<form onSubmit={methods.handleSubmit(onSubmit)} id="sequenceForm">
   <label htmlFor="startDate">Start Date</label>
   <DatePickers name="startDate" id="startDate" />
</form>

    <button
    form="sequenceForm"
    onClick={() => {
    setDialogOpen(false);
     }}
    >
    Save
    </button>

>! not working
    <Button
    form="sequenceForm"
    onClick={() => {
    setDialogOpen(false);
     }}
     >
     Save
    </Button>

我需要使用带有表单道具的 MUI 按钮，就像按钮字段一样。

Answer 1

您可以让按钮调用您自己的表单提交函数。 例如：

const formRef = useRef(null);
const handleClickSubmit = () => {
    if (formRef && formRef.current){
        setDialogOpen(false);
        formRef.current.submit();
    }
}
return (
    <form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>{
        /* your form */}
    </form>
    <Button onClick={handleClickSubmit}>Save</Button>
)

我不能 100% 确定这就是使用引用提交表单的方式，但希望这个想法本身有帮助。