react回调后更新属性

Question

我在 Typescript React 中有以下代码：

当我从组件收到回调时，我正在尝试设置 loggingIn = "true"。这将允许组件显示其登录的指示器。

解决这个问题的最佳方法是什么？

提前谢谢你， 马蒂

登录.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>
    }
}