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>

React onSubmit事件不起作用

1 个答案: