Reactjs ES5中的多个socket.emit()函数

时间:2018-09-03 17:07:54

标签: javascript reactjs socket.io ecmascript-5

我对Reactjs和SocketIO完全陌生。我正在尝试使用Reactjs,SocketIO和MySQL将登录和注册功能添加到一个简单的网站。使用以下代码,我已经能够使用登录功能,

let LoginForm = React.createClass({
componentDidMount() {
    socket.on('loginError', this.loginError);
},
loginError: function () {
    this.setState({error: <div className="alert alert-danger">Wrong email or  password</div>});
},
emitLogin: function () {
    socket.emit('login', {
        email: this.refs.email.value,
        password: this.refs.password.value
    });
},
getInitialState(){
    return {error: ''}
},
render: function () {
    return <div className="container" id="form-signin">
        <form>
            <h2>Sign In</h2>
            {this.state.error}
            <div className="form-group">
                <label htmlFor="email" className="sr-only">Email address</label>
                <div className="input-group">
                    <div className="input-group-addon"><i className="glyphicon glyphicon-envelope"/></div>
                    <input type="email" className="form-control" id="email" ref="email"
                           defaultValue={this.props.defaultEmail} placeholder="Email"/>
                </div>
            </div>
            <div className="form-group">
                <label htmlFor="password" className="sr-only">Password</label>
                <div className="input-group">
                    <div className="input-group-addon"><i className="glyphicon glyphicon-lock"/></div>
                    <input type="password" className="form-control" id="password" ref="password"
                           placeholder="Password"/>
                </div>
            </div>
            <button type="button" className="btn btn-lg btn-success btn-block" onClick={this.emitLogin}>Sign In
            </button>
            <div className="form-group">
                <p></p>
                <p className="center-para">Not a member? <a>Sign Up</a></p>
            </div>
        </form>
    </div>
}
});

我希望Sign Up链接显示注册表。当我尝试添加另一个socket.emit()来实现此目的时,它不起作用(请参见下面的代码)。

emitSignUp: function () {
    socket.emit('signup');
}

<a href="javascript:" onClick={this.emitSignUp}>Sign Up</a>

我非常感谢您的帮助。预先谢谢你。

0 个答案:

没有答案