Javascript 对提交事件不起作用作出反应

当我在表单上按enter键时，它不会触发onSubmit事件。没有错误。另一个事件onBlur执行调度。logForm函数最终将使用console.log作为表单所有字段的JSON字符串，但我还没有做到这一点。我只是试图触发表单上的onSubmit事件。任何帮助或解释都将不胜感激。 代码如下：

import React from 'react'

export default function SignupForm() {
  return (
    <form onSubmit={logForm}>
      <div className="form-group">
        <label>
          Name:
          <input onBlur={logUpdate} className="form-control" 
          type="text" placeholder="Username"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Email:
          <input onBlur={logUpdate} className="form-control" 
          type="text" placeholder="johndoe@example.com"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Password:
          <input onBlur={logUpdate} className="form-control" 
          type="password" placeholder="Password"/>
        </label>
      </div>
      <div className="form-group">
        <label>
          Confirm Password:
          <input onBlur={logUpdate} className="form-control" 
          type="password" placeholder="Password"/>
        </label>
      </div>
    </form>
  )
}

function logForm(e) {
  e.preventDefault()
  const formInfo = new FormData(e.target)
  console.log(formInfo)
}

function logUpdate(e) {
  console.log(e.target.value)
}

从“React”导入React
导出默认函数SignupForm（）{
返回(
姓名：
电邮：
密码：
确认密码：
)
}
功能日志表（e）{
e、 预防默认值（）
const formInfo=新的FormData（例如目标）
console.log（formInfo）
}
功能日志更新（e）{
console.log（例如target.value）
}

您可以在表单控件上放置一个

onKeyPressed

事件，如下所示

onKeyPress={this.onKeyPress}

然后有一个功能捕捉按下的

on键

onKeyPressed: function (e) {
    if (e.key === "Enter") {
        logForm(e);
    }
}

如果你想

Submit

，在你的html部分添加一个按钮：（归功于@TryingToImprove）

提交表格

您的表单没有按钮，因此当您点击“回车”键时，表单不会提交formI Think onSubmit works？默认情况下，回车键不会提交。正如@TryingToImprove所写的，尝试在表单底部添加一个按钮，这也会起到作用。感谢您修复了我的问题，感谢您的快速响应！但是我必须使用onSubmit。@提示当您在答案中添加注释“在底部包含一个按钮”时，它将包含此问题的完整解决方案：）谢谢您的信任：）但是请使用

type=“submit”

而不是

onClick={logForm}

，以使

更好地使用enter键...）谢谢@TryingToImprove

  <div className="form-group">
    <label>
      <button className="btn btn-default" type="submit">submit form</button>
    </label>
  </div>