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="[email protected]" />
</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>
}
}
私はtypescriptですでそれを行うための方法はよく分からない....しかし、あなたは、ログイン状態に 'loggingIn'を割り当て、'と 'onLogin'方法で更新しますthis.setState({loggingIn:true}) '。 –