なぜ論理AND演算子がこの2つの関数を呼び出すのですか

Question

私はhandleSubmitとhandleResetの2つのメソッドを含む反応コンポーネントクラスを持っています。

class Filter extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     // initial state 
    }; 

    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleReset = this.handleReset.bind(this); 
    } 

    handleReset() { 
    this.setState({ 
     // reset state to initial state 
    }); 
    } 

    handleSubmit(event) { 
    // handle form submission and sending request to api endpoint 
    } 

    render() {  
    return (
     <form className="form-horizontal col-sm-12" onSubmit={this.handleSubmit}> 
     <OtherFormElements /> 
     <button 
      type="submit" 
      className="btn btn-success" 
      onClick={this.handleSubmit && this.handleReset} 
     >Submit 
     </button> 
     </form> 
    ); 
    } 
} 

[送信]ボタンをクリックすると、両方の関数が呼び出されます。これは望ましい結果ですが、論理AND演算子についての私の理解から、これはそうではありません。私の理解から、aが真であると評価された場合、& & bはbになります。私が知りたいのは、なぜこの場合に両方の関数が呼び出されるのかということです。

Answer 1

フォームのonSubmitとボタンのonClickの両方が呼び出されるためです。

onSubmitとなるものを推測するのは簡単ですが、this.handleSubmitに設定されています。

ボタンのthis.handleSubmit && this.handleResetでは、JavaScript &&オペレータは、最初falseyオペランドを返し、それらのすべてがtruthyであれば、それはthis.handleResetある最後のオペランドを、retuns。

ボタンのclickイベントが発生したときにその結果、this.handleResetは、フォームのsubmitイベントが発生したときにthis.handleSubmitが続く、と呼ばれています。

Answer 2

この場合、両方の関数が呼び出される理由は何ですか。

onClick={this.handleSubmit && this.handleReset}はthis.handleResetへの呼び出しを行うonClick={this.handleReset}に評価し、フォームタグのonSubmit={this.handleSubmit}ハンドラを持っているので。

ボタンをクリックすると、両方の機能（クリックハンドラのためのものとフォーム送信イベントのためのもの）が呼び出されます。