我对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>
我非常感谢您的帮助。预先谢谢你。