MUI TextField：如何防止提交表单？

Question

我正在使用React和MUI构建表单。 我想防止在用户按下回车键时提交表单。 通常我会用e.preventDefault()来做到这一点，但不知何故这不起作用。 我认为这与 MUI 的TextField组件有关。

这是我的表单的一个简单示例，这里是

function MyForm() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      /* do submit stuff here */
    }}>
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <Button type='submit'>Submit</Button>
    </form>
  );
}

我在这里做错了什么吗？

Answer 1

preventDefault function 在表单的 onSubmit 中，防止页面被重新加载，基本上你需要在文本字段中编写另一个 preventDefault 如下：

<TextField
   onKeyPress={e => e.key === 'Enter' && e.preventDefault()}
/>

Answer 2

添加一个隐藏的文本输入字段：

<input hidden type="text" />