連絡先フォーム情報をJavaScript（ES6）のクラスに保存しますか？

Question

私はフォームが満たされたときに新しい連絡先オブジェクトをインスタンス化するJSアプリケーションを構築しようとしています。しかし、クラスになると、私は入力フィールドを取得して連絡先をインスタンス化するというロジックを作るのに苦労しています。

これまでのコード。

クリックすると連絡先を作成するクラス。

export class Create { 

    addEventListeners() { 
     document.querySelector('#new-contact').addEventListener("click", createContact); 
    } 

    createContact() { 
     let contact = new Contact({ 
      contFn: 'Tim', 
      contLn: 'Cook' 
     }) 
    } 

} 

連絡先のクラス。

'use strict'; 

export class Contact { 

    constructor (contFn, contLn, contEmail, contPhone, contSocial) { 
     this.contFn = contFn; 
     this.contLn = contLn; 
     this.contEmail = contEmail;  
     this.contPhone = contPhone; 
     this.contSocial = contSocial; 
    } 

    printContact() { 
     console.log(this.contFn); 
     console.log(this.contLn); 
    } 

} 

window.addEventListener('load',() => new Contact()); 

Answer 1

createContactは未定義です。その名前の変数はありません。これはメソッドであり、インスタンスのプロトタイプから継承されたプロパティです。 this.createContactとしてアクセスする必要があります。しかし、あなたはメソッド内Createインスタンスを使用していると仮定すると、あなただけのlosing contextせずに周りにそれを渡すことはできませんので、それがない場合、あなたはおそらくここclassを使うべきではありません

addEventListeners() { 
    document.querySelector('#new-contact').addEventListener("click", (e) => this.createContact(e)); 
} 

通告を行う必要があります他の何かをする。