ReactJSの同じクラスの中でメソッドを呼び出す方法は？

Question

同じクラスの中でメソッドを呼びたいと思っています。たとえば、ボタンをクリックすると、メソッドhandleLoginBtnClicked()がトリガーされます。同じクラスのメソッドcheckInputValidation()を呼び出すと思います。これを行う適切な方法は何ですか？

export default class LoginCard extends React.Component { 

    //If I click a button, this method will be called. 
    handleLoginBtnClicked() { 
     this.checkInputValidation(); 
    } 

    checkInputValidation() { 
     alert("clicked"); 
    } 
    ... 
    ... 
    ... 
    render() { 
     ... 
     <LoginBtn onClick={this.handleLoginBtnClicked}/> 
     ... 
    } 
} 

エラーメッセージ：

Uncaught TypeError: this.checkInputValidation is not a function 

Answer 1

あなたがコンポーネントのコンテキストにこれらの機能をバインドする必要があります。あなたがhandleLoginBtnClickedを結合している

export default class LoginCard extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleLoginBtnClicked = this.handleLoginBtnClicked.bind(this); 
     this.checkInputValidation = this.checkInputValidation.bind(this); 
    } 

    //This is the method handleLoginBtnClicked 
    handleLoginBtnClicked() { 
     ... 
    } 

    //This is the method checkInputValidation 
    checkInputValidation() { 
     ... 
    } 

    ... 
    .. 
    . 
} 

Answer 2

：constructor内には、これを行う必要がありますか？関数のコンテキストが失われ、特殊変数thisの意味が失われている可能性があります。 Reactが処理してonClickイベントをトリガーし、別のコンテキストから関数を呼び出して、それが失われた原因となります。

onClickイベントのイベントリスナーとして追加する新しいバインド関数を作成するには、次の構文を使用する必要があります。これにより、handleLoginBtnClickedのコンテキストが失われないことが保証されます。

<element onClick={this.handleLoginBtnClicked.bind(this)}>