ログインにreact-bootstrapモーダルを使用しています。ユーザーが「ログイン」をクリックすると、リクエストがサーバーに送信されます。ログインが失敗した場合 - 状態を設定します - LOGIN_FAILED
この時点で、react アプリケーションが再レンダリングされます。
ログインに失敗した理由は、「ユーザー名またはパスワードが正しくありません」などのエラー メッセージとして表示されます。モーダルは既にアクティブであるため、[ログイン] ボタンの下にエラー メッセージを表示して再レンダリングします。
これは正常に機能します-モーダルを初めて使用するとき(またはページを更新した後)を除いて
この場合、モーダルは消えます。
私はそれをデバッグし、このコードが実行され、モーダルがアンマウントされるのを確認しました:
OverlayMixin.js
componentWillUnmount: function () {
this._unrenderOverlay();
if (this._overlayTarget) {
this.getContainerDOMNode()
.removeChild(this._overlayTarget);
this._overlayTarget = null;
}
},
. . .
_unrenderOverlay: function () {
React.unmountComponentAtNode(this._overlayTarget);
this._overlayInstance = null;
},
誰もこれに遭遇したことがありますか?OverlayMixin を使用して違いがあるかどうかを確認することを検討していますが、根本的な原因を知りたいです。
どんな助けでも感謝します。
LoginModal 反応コンポーネントは次のとおりです。
var LoginModal = React.createClass({
propTypes:{
errorText: React.PropTypes.string,
onRequestHide: React.PropTypes.func,
state: React.PropTypes.string
},
getInitialState: function() {
return {
fbNotAuthorisedOn: false,
fbLoginErrorOn: false,
valid: false,
showErrors: false
};
},
componentWillReceiveProps: function(nextProps) {
if(this.props.state === 'LOGIN_FAILED'){
this.setState({
showErrors: true
});
}
},
_onSubmit: function(e) {
if(e && typeof e !== 'undefined') {
e.stopPropagation();
e.preventDefault();
}
var email = this.refs.email.getValue();
var password = this.refs.password.getValue();
UserAPIUtils.login(email, password);
},
_onKeyDown: function(event) {
if (event.keyCode === AppConstants.ENTER_KEY_CODE && this.state.valid) {
this._onSubmit(event);
}
},
_handleHide: function() {
this.refs.loginModal.props.onRequestHide();
},
_handleFBNotAuthorised: function(message) {
Router.transitionTo('facebook-error', { errorMessage: AppConstants.FACEBOOK_INSUFFICENT_PERMISSIONS_ERROR });
},
_handleFBLoginError: function(errorMessage) {
Router.transitionTo('facebook-error', { errorMessage: errorMessage});
},
_onChange: function(){
if(this.refs.email.getValue() && this.refs.password.getValue()){
this.setState({valid:true});
}else{
this.setState({valid:false});
}
},
render: function () {
var errorText = '';
if(this.state.showErrors){
if(this.props.errorText){
errorText = this.props.errorText;
}else{
errorText = 'Login failed, please try again';
}
}
return this.transferPropsTo(
<Modal className="signPopUpModal"
title="Log In"
backdrop={true}
animation={true}
ref="loginModal"
id="loginModal"
className="signPopUpModal">
<div className="modal-body">
<form role="form" onSubmit={this._onSubmit}>
<Input id="email"
ref="email"
type="email"
placeholder="Enter your email address"
groupClassName="group-class"
wrapperClassName="wrapper-class"
labelClassName="label-class"
addonBefore={Glyphicon({glyph:'user'})}
onKeyDown={this._onKeyDown}
onChange={this._onChange}/>
<Input id="password" type="password" ref="password"
placeholder="Enter your password"
groupClassName="group-class"
wrapperClassName="wrapper-class"
labelClassName="label-class"
addonBefore={Glyphicon({glyph:'lock'})}
onKeyDown={this._onKeyDown}
onChange={this._onChange}/>
<div className="row">
{errorText}
</div>
<div className="row">
<div className="col-md-3 col-xs-6">
<div className="remember-me link">
<input type="checkbox">Remember me</input>
</div>
</div>
<div className="col-md-3 col-md-offset-6 col-xs-6">
<div className="pass link">
<ResetPasswordModalTrigger modal={this.transferPropsTo(<ResetPasswordModal
closeLoginHandler={this._handleHide} />)}>
<a href="#">Forgot Password?</a>
</ResetPasswordModalTrigger>
</div>
</div>
</div>
<div className="row">
<Button id="loginBtn" type="submit"
ref="loginButton"
disabled={!this.state.valid}
block={true}
className="btn-highlight col-md-12">Log in</Button>
</div>
<div className="row">
<p className="or">or</p>
</div>
<div className="row">
<FacebookLogin closeLoginHandler={this._handleHide}
onNotAuthorizedResponse={this._handleFBNotAuthorised}
onErrorResponse={this._handleFBLoginError} />
</div>
<div className="row signup">
<p>Don't have an account?
<RegisterModalTrigger modal={<RegisterModal closeLoginHandler={this._handleHide} />}>
<a href="#">Sign Up</a>
</RegisterModalTrigger>
</p>
</div>
</form>
</div>
</Modal>
);
}
});
module.exports = LoginModal ;`