javascript - React 不会触发组件中的函数

Question

LoginPage 调用 AuthForm 并且结构看起来像

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

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

这很好用，但是当我添加另一个这样的函数时，它停止触发 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>

        }    

为什么 comparePass 不能触发 onSignUpWithEmail ？ ，我没有在登录页面中这样做的原因是我以后可能会使用 authfrom..

关于如何解决这个问题有什么建议吗？

Answer 1

假设您要在 comparePass 中做更多事情，但想传递 event 然后尝试:

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