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

【问题标题】：MUI TextField: How to prevent form from being submitted?MUI TextField：如何防止表单被提交？
【发布时间】：2023-03-24 01:50:02
【问题描述】：

我正在使用 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>
  );
}

我在这里做错了吗？

【问题讨论】：

标签： javascript reactjs forms material-ui

【解决方案1】：

form的onSubmit中的preventDefault函数，防止页面被重新加载，基本上你需要在textfield里面再写一个preventDefault如下：

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

【讨论】：