将表单与 MUI onSubmit 方法一起使用不起作用

Question

我正在使用 MUI 作为组件。经过几天的痛苦调试，我发现当组件用于包装表单onSubmit时，我的表单没有调用该方法。Box请在下面找到最小的例子。为什么会发生这种情况？onClick不过效果很好。组件在这里不是Box一个有效的用例吗？我应该以不同的方式使用 API 吗？

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

export function MainForm() {

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

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

Answer 1

由于您将 Box 组件定义为表单，因此您必须将其放置onSubmit在其中。

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

您正在重写您的 MUI 组件，因此 Box 已经将自己假定为表单组件。

请考虑阅读MUI 文档中的覆盖 MUI 组件。

Answer 2

由于接受的答案并没有真正解释您的代码不起作用的原因，因此以下是一些注释：

Box component='form'意味着它Box实际上是一个带有额外垃圾的表单组件，您的代码将如下所示：

<form {...extraPropsFromBox}>
  <form onSubmit={submitHandler}>
    <TextField />
    <Button type="submit">Submit</Button>
  </form>
</form>

HTML 5不支持嵌套表单，使用它会带来麻烦，在这种情况下，它可能会忽略submit嵌套表单中的处理程序，修复方法是删除外部处理程序。如果您不需要设置表单容器的样式，只需使用普通form标签即可。如果您想快速应用某些样式，请使用Box+ ：form

<Box component="form" onSubmit={submitHandler} sx={{ maxWidth: 300, bgcolor: 'gray' }}>
    <TextField />
    <Button type="submit">Submit</Button>
</Box>

我认为看到 API 我需要告诉它我想要包装哪个组件

所有 MUI 组件都有一个component允许您覆盖根组件的 prop。下面是Box钩子下的样子。您不必指定，component因为它们都有默认值：

function Box({ component = 'div', ...boxProps }) {
  return <component {...boxProps} />
}