javascript - React nu declanșează funcția în componentă

Pagina de autentificare apelează AuthForm și structura arată astfel

function mapDispatchToProps(dispatch: Redux.Dispatch<any>) {
    return {
    signUpWithEmail: function(email: string, password: string) {
         // bla bla 
     },
 };
}

handleFormSignUpWithEmail(event: React.FormEvent) {
     event.preventDefault();
    console.log("handleFormSignUpWithEmail is fired");
    this.props.signUpWithEmail(this.props.email,this.props.password);
}
render() {
        return (
          <AuthForm onSignUpWithEmail {this.handleFormSignUpWithEmail.bind(this) } />   );
    }
};

în AuthForm

export interface AuthFormProps {
    onSignUpWithEmail?: (event: React.FormEvent) => void;
}

render() {
    return (
    <button  className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-pull-right"
      onClick={this.onSignUpWithEmail.bind(this)}>
        Submit
    </button>

Acest lucru funcționează foarte bine, dar când adaug o altă funcție ca aceasta, încetează să se declanșeze onSignUpWithEmail

comparePass()
    {
      this.props.onSignUpWithEmail.bind(this);
    }

    render() {
        return (
        <button className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-pull-right"
                     onClick={this.comparePass.bind(this)}>
                     Submit
                 </button>

        }    

de ce comparePass nu poate declanșa onSignUpWithEmail? Motivul pentru care nu fac asta în pagina de autentificare este pentru că s-ar putea să folosesc authfrom mai târziu..

Aveți vreo sugestie cum să repar asta?

Răspuns #1

Presupunând că vei face mai mult în comparePass, dar vrei să transmiți event, încearcă:

const boundSignup = this.props.onSignUpWithEmail.bind(this, event);
boundSignup();