反应 onSubmit 事件不起作用

Question

当我在表单上按 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)
}

Answer 1

你可以做的是像这样在你的表单控件上放置一个onKeyPressed 事件

onKeyPress={this.onKeyPressed}

然后有一个函数捕捉onKeyPressed

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

如果您希望 Submit 工作，请在您的 html 部分添加一个按钮：（感谢 @TryingToImprove）

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