使用<a> tag in Reactjs ES5

时间:2018-09-05 15:47:48

标签: reactjs ecmascript-5

I'm new to reactjs and I have been trying to do a simple task of using a link to display a new component. I have a login component which has a Sign up link. I want the SignUp component I have written, to be displayed when I click the Sign up link (See code below).

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>});
},
logOut: function () {
    socket.emit('logout');
},
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 onSubmit={this.logOut}>
            <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>
        <a href="">Sign up</a>

        </form>
    </div>
}
 });

I would really appreciate some help. Thanks

0 个答案:

没有答案