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

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

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

React不会触发组件中的功能

1 个答案: