是什么导致 Cannot read 属性 'preventDefault' of undefined in this form validator class？

Question

我正在 JavaScript 中开发表单验证器 class:

class FormValidator {
  constructor() {
    this.formToValidate = document.querySelector("form");
    this.submitButton = this.formToValidate.querySelector("input[type=submit]");
  }

  validateForm() {
    console.log('test');
  }

  submitForm(e) {
    e.preventDefault();
    this.validateForm();
  }

  init(e) {
    this.formToValidate.addEventListener('submit', this.submitForm(e));
  }
}

const formValidator = new FormValidator();
formValidator.init();

<form action="/" novalidate>
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required />
  </div>
  <div class="form-group">
    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" required />
  </div>
  <div class="form-group">
    <input type="text" name="phone" class="form-control" placeholder="Your Phone Number" value="" required />
  </div>
  <div class="form-group">
    <textarea name="message" class="form-control" placeholder="Your Message"></textarea>
  </div>
  <div class="form-group mb-0">
    <input type="submit" name="btnSubmit" class="btn btn-success btn-block" value="Send Message" />
  </div>
</form>

我收到一个 Cannot read property 'preventDefault' of undefined 错误，我无法找到其原因。

Answer 1

改变

init(e) {
    this.formToValidate.addEventListener('submit', this.submitForm(e));
}

至

init(e) {
    this.formToValidate.addEventListener('submit', () => this.submitForm(e));
}

Answer 2

您在 init 函数中有一个未定义的参数 e。只需使用：

init() {
        this.formToValidate.addEventListener('submit', this.submitForm);
      }

是什么导致 Cannot read 属性 'preventDefault' of undefined in this form validator class？

What causes the Cannot read property 'preventDefault' of undefined in this form validator class?

javascript

es6-class