0

我正在使用 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 ;`
4

1 回答 1

0

我们在渲染这个 Modal 时发现，它周围有一个额外的东西。删除它解决了问题。关闭。

于 2014-11-26T10:56:53.547 回答