Material UI（React.js）中form绑定的handleSubmit函数无法触发如何解决

你的表单提交事件无法触发的核心原因是提交按钮未指定type="submit"属性。Material UI的<Button>组件默认type值为button，不会主动触发父级form的onSubmit事件。

修复步骤 #

• 给Register按钮添加type="submit"属性
  修改后的按钮代码如下：

<Button
  type="submit"
  className={classes.buttn}
  variant="outlined"
  color="primary"
  align="left">
  Register
</Button>

修改后点击按钮即可正常触发handleSubmit函数。

其他可优化项 #

• 补充缺失的按钮样式：你在按钮上绑定了classes.buttn，但makeStyles中未定义对应样式规则，可按需补充：

const useStyle = makeStyles({
  field: { marginTop: 20, marginBottom: 20, display: 'block' },
  buttn: { marginTop: 15 } // 可自定义样式属性
});

• 优化表单校验逻辑：原handleSubmit中存在重复赋值错误状态的问题，可调整为先重置错误状态再做校验，逻辑更合理：

const handleSubmit = (e) => {
  e.preventDefault();
  // 先清空之前的错误状态
  setnameError(false);
  setphnNOError(false);

  if (!name) setnameError(true);
  if (!phnNO) setphnNOError(true);
  
  if (name && phnNO && address) {
    console.log(name, phnNO, address);
  }
};

内容的提问来源于stack exchange，提问作者Urvesh Trivedi