Aktualisieren Eigenschaften nach einem Rückruf in reagieren

Question

Ich habe den folgenden Code in Maschinenschrift Reagieren:

Ich versuche loggingIn = „true“ zu setzen, wenn ich den Anruf zurück von der Komponente erhalten. Dies würde der Komponente ermöglichen, einen Indikator anzuzeigen, dass sie sich anmeldet.

Was ist der beste Weg, dies zu erreichen?

Vielen Dank im Voraus, Marty

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

Ihre Login.tsx sollte wie folgt aussehen:

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") 
) 

Und die 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> 
    } 
}