javascript - 如果登录成功，有条件地关闭 Bootstrap 模式面板

Question

我正在构建一个将reactjs与jquery集成的SPA web应用程序，我有一个控制身份验证的组件。它正在渲染一个带有用户名和密码的模式面板。

仅当身份验证成功时，我想有条件地关闭模式面板。

问题是，如果我在登录按钮中设置 data-dismiss="modal"，则当 onclick 事件触发后，模式总是无条件关闭。 所以基本上我想知道如何具有相同的数据关闭行为，但一旦我收到后端的响应并且身份验证已成功。

这里是代码。

var LoginModal = React.createClass({


getInitialState: function () {

    return {email: "", password: ""}

},

render: function () {

    return (<div className="modal fade" id="loginModal" tabIndex="-1" role="dialog" aria-hidden="true">
        <div className="modal-dialog">
            <div className="modal-content">
                <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true"><i
                        className="fa fa-times"></i>
                    </button>
                    <h2>Login or <a href="register">Register</a></h2>

                    <p className="large">Use social accounts</p>

                    <div className="social-login">
                        <a className="facebook" href="#"><i className="fa fa-facebook-square"></i></a>
                        <a className="google" href="#"><i className="fa fa-google-plus-square"></i></a>
                        <a className="twitter" href="#"><i className="fa fa-twitter-square"></i></a>
                    </div>
                </div>
                <div className="modal-body">
                    <form className="login-form">
                        <div className="form-group group">
                            <label htmlFor="log-email">Email</label>
                            <input type="email" value={this.state.email} className="form-control" name="log-email"
                                   id="log-email"
                                   placeholder="Enter your email" required onChange={this.handleChangeEmail}/>
                            <a className="help-link" href="#">Forgot email?</a>
                        </div>
                        <div className="form-group group">
                            <label htmlFor="log-password">Password</label>
                            <input type="password" value={this.state.password} className="form-control"
                                   name="log-password" id="log-password"
                                   placeholder="Enter your password" required onChange={this.handleChangePassword}/>
                            <a className="help-link" href="#">Forgot password?</a>
                        </div>
                        <div className="checkbox">
                            <label><input type="checkbox" name="remember"/> Remember me</label>
                        </div>
                        <a className="btn btn-success" value="Login"  disabled={!this.state.email || !this.state.password} onClick={this.handleClick}>Login</a>
                    </form>
                </div>
            </div>

        </div>

    </div>);

},

handleClick: function () {
    $.ajax({
        url: "http://localhost:8080/std/rest/oauth/token",
        type: "POST",
        headers: {
            "Authorization": "Basic " + btoa("clientapp" + ":" + "123456"),
            "Accept": "application/json",
        },
        data: {
            grant_type: "password",
            password: this.state.password,
            username: this.state.email,
            scope: "read write",
            client_secret: "123456",
            client_id: "clientapp"
        },
        dataType: "json",
        statusCode: {
            200: function(response) {
                auth.login(response.access_token, response.expires_in);
            },
            400: function() {
                alert("Bad credentials. Try again.");
            }
        }
    });
},

handleChangeEmail: function (event) {
    this.setState({email: event.target.value});
},
handleChangePassword: function (event) {
    this.setState({password: event.target.value});
},

isValidForm: function () {
    console.log("valid: " + this.state.userData.email && this.state.userData.password);
    return (this.state.userData.email && this.state.userData.password);
}
});


ReactDOM.render(
<LoginModal/>,
document.getElementById('login-modal')
);

Answer 1

您正在寻找以下 jQuery 方法来关闭模式:

$('#loginModal').modal('hide');