[英]How do I set the status of a variable of a class in a method that using this keyword
I am trying to display the outcome of a reset service in my Ionic react app.我正在尝试在我的 Ionic react 应用程序中显示重置服务的结果。 I am unable to use the this.setState({resetSuccess})
because I am trying to do that in a method, and this
would refer to the method's scope.我无法使用this.setState({resetSuccess})
因为我试图在一个方法中这样做, this
将引用该方法的范围。 (I have also mentioned the issue as comments) (我也在评论中提到了这个问题)
Please refer to the code below:请参考以下代码:
private async handleSubmit(e: React.FormEvent, ): Promise<any> { e.preventDefault(); try { console.log(`These are the reset params---->${JSON.stringify(Reset.resetParams)}`) const resetService = new ResetService(); const resetResponse: ResetResponse = await resetService.reset(Reset.resetParams); console.log(`This is the response from the API ----> ${JSON.stringify(resetResponse)}`) if (resetResponse.status === 401) { console.log("Authentication failed"); } else if (resetResponse.status === 200) { console.log("Password reset successfully"); const resetSuccess: boolean = true; this.setState({ resetSuccess }) // ****How do I set this state? which is in the class's scope? Reset.history.push('/login'); } } catch (e) { console.log(`Request failed: ${e}`); const resetSuccess: boolean = false; this.setState({ resetSuccess }) } }
This is my render function:这是我的渲染功能:
public render() { const { resetSuccess, errors } = this.state; const context: FormContext = { ...this.state, setValues: this.setValues, validate: this.validate }; return ( <IonPage id="login-registration-page"> <IonHeader> <IonToolbar color="primary"> <IonTitle>Reset Password</IonTitle> </IonToolbar> </IonHeader> <IonContent> <FormContext.Provider value={context}> <form onSubmit={this.handleSubmit} className="login-registration-form ion-padding"> <div className="container"> {this.props.render()} <div className="form-group"> <IonButton type="submit" disabled={!this.completeValidation} expand="block" >Submit</IonButton> </div> {resetSuccess === true && ( //*****This is what I am trying to display based on the outcome <div className="alert alert-info" role="alert"> Password reset successfull. You will be redirected shortly to the login page </div> )} {resetSuccess === false && ( <div className="alert alert-danger" role="alert"> Either the link that you have clicked on or the current password you provided is incorect. Please use the right verification link you received and input the correct password. </div> )} </div> </form> </FormContext.Provider> </IonContent> </IonPage> ) }
There are a couple ways to do this, but I would suggest using a function that returns your desired handleSubmit
function using the correct setState
handler.有几种方法可以做到这一点,但我建议使用一个函数,该函数使用正确的setState
处理程序返回所需的handleSubmit
函数。 By using a function that returns a function, you can have access to the scope of the component to pass the desired setState
method to your handleSubmit
function.通过使用返回函数的函数,您可以访问组件的范围,将所需的setState
方法传递给您的handleSubmit
函数。
private async handleSubmit():
(e: React.FormEvent) => Promise<any> {
const setState = this.setState; // Define local reference to setState
return (e: React.FormEvent) => {
e.preventDefault();
try {
console.log(`These are the reset params---->${JSON.stringify(Reset.resetParams)}`)
const resetService = new ResetService();
const resetResponse: ResetResponse = await resetService.reset(Reset.resetParams);
console.log(`This is the response from the API ----> ${JSON.stringify(resetResponse)}`)
if (resetResponse.status === 401) {
console.log("Authentication failed");
}
else if (resetResponse.status === 200) {
console.log("Password reset successfully");
const resetSuccess: boolean = true;
setState({ resetSuccess }) // Now referring to your local reference
Reset.history.push('/login');
}
} catch (e) {
console.log(`Request failed: ${e}`);
const resetSuccess: boolean = false;
setState({ resetSuccess }) // Now referring to your local reference
}
}
}
Then in your render method, call the handleSubmit
method instead, as it now returns the desired handler:然后在您的渲染方法中,改为调用handleSubmit
方法,因为它现在返回所需的处理程序:
<form onSubmit={this.handleSubmit()} className="login-registration-form ion-padding">
Binding the handleSubmit method to the class in the constructor worked.将 handleSubmit 方法绑定到构造函数中的类有效。
constructor(props: any) { super(props); const errors: Errors = {}; const values: Values = {}; this.state = { errors, values }; this.currentPasswordProvided = false; this.passwordValidated = false; this.completeValidation = false; this.emailAddress = ''; Reset.history = this.props.history; this.handleSubmit=this.handleSubmit.bind(this) //<------ Binding it to the class is required because when the submit is clicked, the handler gets unmounted, and this will not be defined in the handleSubmit. }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.