Question

我正在设置重置密码的功能。函数resetPassword在一个组件中定义，但在另一个组件中使用props进行调用，该组件使用state给定的参数进行回调。

这是定义了resetPassword并将其作为props参数发送给组件User的第一个组件。

resetPassword(password, confirmPass){
   alert(passsword + " " confirmPass);
}

render() {
    return (
        <User resetPassword={this.resetPassword} />
    )
  }

组件用户通过提供状态参数来调用该功能。

<button onClick={this.props.resetPassword(this.state.password, this.state.confirmPass)} className="btn" data-toggle="button">Change password</button>

问题在于，当第一个组件被卸载时，该函数正在调用，而不是定义的onClick。

有什么想法吗？

Answer 1

您试图在onClick处理程序中调用函数，而不是对其进行绑定。

尝试一下：

<button onClick={() => this.props.resetPassword(this.state.password, this.state.confirmPass)} className="btn" data-toggle="button">Change password</button>

Answer 2

问题是您在按下按钮时调用函数有几个选择

<button onClick={this.props.resetPassword(this.state.password, this.state.confirmPass)} className="btn" data-toggle="button">Change password</button>

下面是无需调用函数即可绑定值的方法。

onClick={this.props.resetPassword.bind(this,this.state.password, this.state.confirmPass)
onClick={() => this.props.resetPassword(this.state.password, this.state.confirmPass) }

在componentDidMount而不是onClick上调用的函数

2 个答案: