u.gen u.gen - 1 month ago 8
React JSX Question

React doesn't fire function in component

LoginPage calls AuthForm and structure looks like

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) } /> );
}
};


in 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>


This works great, but when I add another function like this, it stops firing
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>

}


why comparePass, cannot fire
onSignUpWithEmail
? , the reason I am not doing this in loginpage because I may use authfrom later..

Any suggestions how to fix this?

Answer

Assuming you're going to do more in comparePass but want to pass along the event then try:

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