Javascript 反应引导模式在按钮单击时关闭

我是新的流星和反应引导。我正在尝试从React引导模式向Meteor注册一个用户。我的用户注册代码工作正常，但对meteor Accounts.createUser的异步调用一执行，我的模式就会关闭。如果我删除对Accounts.createUser的调用，我的模式将保持打开状态

我希望模式保持打开状态，以防出现任何错误，例如用户用于注册的电子邮件已经存在，并且我可以在模式字段旁边显示消息。如果异步调用完成后没有错误，我可以关闭模式

如有任何帮助，我们将不胜感激。请参阅下面我用来实现这一点的两个React组件。我使用登录控件作为一个单独的组件，这样我就可以在登录屏幕不需要是模态的其他地方重用核心代码。（我仍处于测试模式，因此模式标签上显示Signin，但实际上我正在创建用户）

var-Button=ReactBootstrap.Button；
var Modal=ReactBootstrap.Modal；
LoginModal=React.createClass({
getInitialState（）{
返回{show:false}；
},
modalClosing（）{
this.setState（{show:false}）；
},
render（）{
让close=（）=>this.modalClosing（）；
让open=（）=>this.setState（{show:true}）；
返回(
登录
登录
);
}
});
var Button=ReactBootstrap.Button；
var ButtonInput=ReactBootstrap.ButtonInput；
var Input=ReactBootstrap.Input；
var Label=ReactBootstrap.Label；
LoginControl=React.createClass({
getInitialState（）{
返回{
残疾人:对,，
userStyle:null，
pwdStyle:null，
BTN样式：“主要”
};
},
重置验证（）{
这是我的国家({
残疾人:对,，
userStyle:null，
pwdStyle:null，
BTN样式：“主要”
});
},
validationState（）{
让length=this.refs.input.getValue（）.length；
设btnStyle=‘危险’；
如果（长度>6）btnStyle=‘成功’；
如果（长度>4）btnStyle=‘警告’；
让禁用=btnStyle！=“成功”；
返回{btnStyle，disabled}；
},
showCloseButton（）{
如果（此.props.showCloseButton）{
返回（关闭）；
}
返回null；
},
handleChange（输入，e）{
让validationState=this.validationState（）；
if（validationState！=null）{
设值=e.target.value；
设btnStyle=validationState.btnStyle；
if（validationState.btnStyle==“成功”）{
btnStyle=null；
}
否则{
如果（输入=“用户”）{
btnStyle=this.state.userStyle；
}
否则如果（输入=“pwd”）{
btnStyle=this.state.pwdStyle；
}
}
如果（输入=“用户”）{
this.setState（{user:value，userStyle:btnStyle}）；
}
否则如果（输入==“pwd”）{
this.setState（{pwd:value，pwdStyle:btnStyle}）；
}
}
this.setState（validationState）；
},
登录（）{
Accounts.createUser({
电子邮件：this.state.user，
用户名：this.state.user，
密码：this.state.pwd，
配置文件：空
}，函数（错误）{
如果（错误）{
如果（error.error==403.1）{
this.setState（{user:this.state.user，userStyle:“error”，pwdStyle:“error”，validationMessage:error.message}）；
}
else if（error.error==403.2）{
this.setState（{pwd:this.state.pwd，userStyle:“error”，pwdStyle:null，validationMessage:error.message}）；
}
}
否则{
this.props.onCloseClick（）；
//Router.go（'/'）；
}
});
},
tryLogin（args）{
//args.preventDefault（）；
登录名（args）；
},
渲染：函数（）{
返回(
{this.state.validationMessage}
登录
{this.showCloseButton（）}
记得我吗


);
}
});

您忘记将this.tryLogin绑定到中的组件onClick@madoxx22，谢谢你浏览这篇文章。据我所知，react会自动执行此操作，因此您不必绑定调用。您是对的，您使用的是es6类

var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;

LoginModal = React.createClass({

    getInitialState() {
        return { show: false };
    },

    modalClosing(){
        this.setState({ show: false });
    },

    render() {
        let close = () => this.modalClosing();
        let open = () => this.setState({ show: true});
        return (
            <div>
                <Button bsStyle="primary"
                        bsSize="small"
                        onClick={open}>
                    Login
                </Button>

                <div className="modal-container">
                    <Modal show={this.state.show}
                        onHide={close}
                        container={this}
                        animation={true}
                        onRequestHide={close}
                        backdrop="static"
                        dialogClassName="custom-modal"
                        aria-labelledby="contained-modal-title">
                        <Modal.Header closeButton>
                            <Modal.Title className="h2" id="contained-modal-title">Sign in</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <LoginControl showCloseButton="true" onCloseClick={close}/>
                        </Modal.Body>
                    </Modal>
                </div>
            </div>
        );
    }
});

var Button = ReactBootstrap.Button;
var ButtonInput = ReactBootstrap.ButtonInput;
var Input = ReactBootstrap.Input;
var Label = ReactBootstrap.Label;

LoginControl = React.createClass({
    getInitialState() {
        return {
            disabled: true,
            userStyle: null,
            pwdStyle: null,
            btnStyle: "primary"
        };
    },

    resetValidation() {
        this.setState({
            disabled: true,
            userStyle: null,
            pwdStyle: null,
            btnStyle: "primary"
        });
    },

    validationState() {
        let length = this.refs.input.getValue().length;
        let btnStyle = 'danger';

        if (length > 6) btnStyle = 'success';
        else if (length > 4) btnStyle = 'warning';

        let disabled = btnStyle !== 'success';

        return { btnStyle, disabled };
    },

    showCloseButton(){
        if (this.props.showCloseButton) {
            return (<Button className="pull-right signin-modal-closebtn" bsSize="large" onClick={this.tryLogin}>Close</Button>);
        }
        return null;
    },

    handleChange(input, e) {
        let validationState = this.validationState();
        if (validationState != null) {
            let value = e.target.value;
            let btnStyle = validationState.btnStyle;
            if (validationState.btnStyle === "success") {
                btnStyle = null;
            }
            else {
                if (input == "user") {
                    btnStyle = this.state.userStyle;
                }
                else if (input == "pwd") {
                    btnStyle = this.state.pwdStyle;
                }
            }
            if (input === "user") {
                this.setState({ user: value, userStyle: btnStyle });
            }
            else if (input === "pwd") {
                this.setState({ pwd: value, pwdStyle: btnStyle });
            }
        }
        this.setState(validationState);
    },

    login (){
        Accounts.createUser({
            email: this.state.user,
            userName: this.state.user,
            password: this.state.pwd,
            profile: null
        }, function (error) {
            if (error) {
                if (error.error === 403.1) {
                    this.setState({ user: this.state.user, userStyle: "error", pwdStyle: "error", validationMessage :error.message});
                }
                else if (error.error === 403.2) {
                    this.setState({ pwd: this.state.pwd, userStyle: "error", pwdStyle: null, validationMessage: error.message });
                }
            }
            else {
                this.props.onCloseClick();
                //Router.go('/');
            }
        });
    },

    tryLogin(args) {
        //args.preventDefault();
        this.login(args);
    },

    render: function () {
        return (
            <div>
                <Label class="sr-only">{this.state.validationMessage}</Label>
                <Input type="email" id="inputEmail" placeholder="Email address" ref="input" bsSize="large" bsStyle={this.state.userStyle} required autofocus onChange={this.handleChange.bind(this,"user")}/>
                <Input type="password" id="inputPassword" class="form-control" ref="input" bsSize="large" placeholder="Password" required onChange={this.handleChange.bind(this,"pwd")}/>
                <div class="checkbox">
                    <Button bsStyle={this.state.btnStyle} className="pull-right" bsSize="large" disabled={this.state.disabled} onClick={this.tryLogin}>Sign in</Button>
                    {this.showCloseButton()}
                    <label>
                        <input type="checkbox" value="remember-me" /> Remember me
                    </label>
                </div>
                <br />
            </div>
        );
    }
});