如何在成功调用API后显示对话框?

时间:2018-04-17 07:12:44

标签: javascript ajax reactjs react-redux

我有一个注册按钮

<button type="submit" className="btn btn-primary btn-blue login_btn" onClick={this.signup.bind(this)} data-toggle="modal" data-target="#signupdialog">Signup</button>

signup() {
    let data = Object.assign({}, this.state);
    UserAction._createUser(data);
}
}


export function _createUser(data) {
dispatcher.dispatch({
    type: 'Loader',
    showLoader: true
})
data = JSON.stringify(data);
let url = "/users/create";
let BASE = "http://172.104.167.150:9080"
let actualurl = BASE + url;

Api._callAPI(actualurl, 'POST', data, (type, dt) => {
    if (type == 'success') {
        dispatcher.dispatch({
            type: 'Loader',
            showLoader: false
        })
        dispatcher.dispatch({
            type: 'SnackBar',
            string: dt.response
        })
        }

});
}



<div className="modal fade" id="signupdialog" role="dialog">
            <div className="modal-dialog">


            <div className="modal-content">
                    <div className="modal-header" style={{backgroundColor: "#a8dde4"}}>
                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                    <h4 className="modal-title">Hello !!</h4>
                    </div>
                    <div className="modal-body">
                    <p> Login Credentials has been sent to Email </p>

                    </div>
                    <div className="modal-footer">
                    <Link to="/" type="button" className="btn btn-default" style={{backgroundColor: "#a8dde4"}} data-dismiss="modal">Close</Link>
                    </div>
            </div>

            </div>
        </div>

我希望在成功的api调用后点击注册模型 现在,关于API的失败案例也是模型即将点击注册我希望该模型仅在成功Api调用后才会出现

请任何人指导我,在成功行动之后获取模型而不是一直以来的模型(失败和成功案例)

2 个答案:

答案 0 :(得分:0)

你在国家维持任何旗帜吗? 成功进行API调用后,您可以更新状态,例如:

 this.setState({ gotSuccess: true});

然后在JSX中,你可以给出if else条件。例如:

If this.state.gotSuccess == true {your JSX Code } : null

答案 1 :(得分:0)

只需在你的州创建一个属性,它将代表模态。并且在API调用之后改变它的确切方式