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

Question

我正在为组件使用 MUI。经过几天痛苦的调试，我发现我的表单没有调用 onSubmit 方法，而 Box 组件用于包装表单。请在下面找到最小的 ex。为什么会这样？ 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 已经假定自己是一个表单组件。

考虑阅读 Overriding MUI components来自 MUI 文档。