我正在为组件使用 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 >
)
}
最佳答案
由于您将 Box 组件定义为表单,因此您必须将 onSubmit
放在其中。
<Box component="form" onSubmit={submitHandler}>
<TextField />
<Button type="submit">Submit</Button>
</Box>
您正在覆盖您的 MUI 组件,因此 Box 已经假定自己是一个表单组件。
考虑阅读 Overriding MUI components来自 MUI 文档。
关于reactjs - 将表单与 MUI onSubmit 方法一起使用不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69766400/