在迴應之後更新屬性

Question

在Typescript反應中我有以下代碼：

我試圖設置loggingIn =「true」，當我從組件中取回回調時。這將允許組件顯示其登錄的指示。

解決此問題的最佳方法是什麼？

謝謝你在前進， 馬蒂

Login.tsx

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import { LoginPanel } from "../Shared/LoginPanel.tsx"; 


    let loggingIn: string = "false"; 

    ReactDOM.render(
     <LoginPanel loggingIn={ loggingIn } onLogin={ 
      function (email:string, password:string) { 
       this.loggingIn = "true"; 
       alert("Logging in with e-mail" + email + " and password " + password); 
      }.bind(this) 
     } />, 
     document.getElementById("loginpanel") 
    ) 

LoginPanel.tsx

import * as React from "react"; 

export interface Properties { loggingIn:string; onLogin: (email: string, password: string) => void; } 

export class LoginPanel extends React.Component<Properties, {}> { 

    email: HTMLInputElement = null; 
    password: HTMLInputElement = null; 



    submit = (e: any) => { 
     e.preventDefault(); 
     this.props.onLogin(this.email.value,this.password.value); 
    }; 



    render() { 

     return <div className="row"> 
      <div className="col-xs-3"> 


       <h3>Log in with your email account</h3> 
       <form onSubmit={this.submit}> 
        <div className="form-group"> 

         { this.props.loggingIn } 

         <label htmlFor="email" className="sr-only">Email</label> 
         <input type="email" ref={(input) => { this.email = input; } } className="form-control" placeholder="somebody@example.com" /> 
        </div> 
        <div className="form-group"> 
         <label htmlFor="key" className="sr-only">Password</label> 
         <input type="password" ref={(input) => { this.password = input; } } className="form-control" placeholder="Password" /> 
        </div> 

        <input type="submit" id="btn-login" className="btn btn-custom btn-lg btn-block" value="Log in" /> 
       </form> 
       <a href="javascript:;" className="forget" data-toggle="modal" data-target=".forget-modal">Forgot your password?</a> 
       <hr /> 
      </div> 
     </div> 
    } 
} 

Answer 1

你Login.tsx應該是這樣的：

let loggingIn: string = "false"; 
function onLogin(email: string, password: string) { 
    loggingIn = "true"; 
    console.log(`logged in. email: ${ email }, password: ${ password }`); 
} 

ReactDOM.render(
    <LoginPanel loggingIn={ loggingIn } onLogin={ onLogin } />, document.getElementById("loginpanel") 
) 

而且LoginPanel.tsx：

export interface Properties { 
    loggingIn: string; 
    onLogin: (email: string, password: string) => void; 
} 
interface State { 
    loggingIn: string; 
} 

export class LoginPanel extends React.Component<Properties, State> { 
    email: HTMLInputElement = null; 
    password: HTMLInputElement = null; 

    constructor(props: Properties) { 
     super(props); 

     this.state = { 
      loggingIn: props.loggingIn 
     }; 
    } 

    submit = (e: React.FormEvent) => { 
     e.preventDefault(); 
     this.props.onLogin(this.email.value, this.password.value); 
    }; 

    render() { 
     return <div className="row"> 
      <div className="col-xs-3"> 
       <h3>Log in with your email account</h3> 
       <form onSubmit={ this.submit }> 
        <div className="form-group"> 
         { this.state.loggingIn } 
         <label htmlFor="email" className="sr-only">Email</label> 
         <input type="email" ref={(input) => { this.email = input; } } className="form-control" placeholder="somebody@example.com" /> 
        </div> 
        <div className="form-group"> 
         <label htmlFor="key" className="sr-only">Password</label> 
         <input type="password" ref={(input) => { this.password = input; } } className="form-control" placeholder="Password" /> 
        </div> 

        <input type="submit" id="btn-login" className="btn btn-custom btn-lg btn-block" value="Log in" /> 
       </form> 
       <a href="javascript:;" className="forget" data-toggle="modal" data-target=".forget-modal">Forgot your password?</a> 
       <hr /> 
      </div> 
     </div> 
    } 
}