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" />