使用MUI的Box组件包裹表单后onSubmit方法不触发是什么原因？

问题根因 #

你的代码存在表单嵌套问题，不符合HTML规范：

• 你给Box组件传入了component="form"属性，此时Box会直接渲染为<form> DOM节点
• 你又在Box内部额外写了一层<form>标签，形成了嵌套表单结构
  HTML标准明确禁止<form>元素嵌套，浏览器解析时会自动修正该非法结构，通常会直接忽略内层<form>的事件绑定或者直接移除内层表单节点，导致你绑定的onSubmit方法无法触发。

Box组件适配性 #

Box完全适用于该场景。Box作为MUI的通用容器组件，本身支持通过component属性自定义渲染的DOM标签，用来封装表单容器是非常常见的用法。

调整方案 #

你可以选择以下任意一种方式修改代码即可：

方案1：直接用Box作为表单容器（更符合MUI的设计思路） #

删掉内部的原生<form>标签，把onSubmit直接绑定到Box上：

import { Box, Button, TextField } from '@mui/material';

export function MainForm() {
  const submitHandler = (e) => {
    console.log('submit called');
    e.preventDefault();
  }

  return (
    <div>
      <Box
        component="form"
        onSubmit={submitHandler}
      >
        <TextField />
        <Button type="submit">Submit</Button>
      </Box>
    </div >
  )
}

方案2：保留原生form标签，移除Box的form渲染属性 #

删掉Box的component="form"配置，Box默认渲染为<div>，不会形成表单嵌套：

import { Box, Button, TextField } from '@mui/material';

export function MainForm() {
  const submitHandler = (e) => {
    console.log('submit called');
    e.preventDefault();
  }

  return (
    <div>
      <Box>
        <form onSubmit={submitHandler}>
          <TextField />
          <Button type="submit">Submit</Button>
        </form>
      </Box>
    </div >
  )
}

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