如果使用React js成功登录，则重定向到另一个HTML页面

Question

I am new to React, I would like to know if it is possible with React js. for example I have a login modal, and I tried to write a basic script and take de value of inputs with this code document.getElementById("email"); but not working. please help me, that I can use? or how do it ? please, oh and sorry for my english :D

Answer 1

Yes, it's possible.

1. You do not need to use document.getElementById("email"); Check how
   work with inputs https://facebook.github.io/react/docs/forms.html
2. I suggest to add React Router https://github.com/reactjs/react-router-tutorial it helps you to redirect user when it's necessary in correct and elegant way.

Example:

export default class Login extends React.Component {
constructor(props) {
    super(props);

    this.state = {
      login: '',
      password: '',
    };
    this.onChangeInput = this.onChangeInput.bind(this);
    this.onLogin = this.onLogin.bind(this);
    this.onHandleLogin = this.onHandleLogin.bind(this);
  }

  onHandleLogin() {
    /* using react router you can do this */
    browserHistory.push('/todo');
  }
  onShowLoginError() {
    this.setState({
      showError: true,
    });
  }

  onChangeInput({ target: { value, name } }) {
    this.setState({
      [name]: value,
    });
  }

  onLogin(e) { 
    e.preventDefault();
    /* check here credentials */
    /* I do request to server */
    const init = {
      method: 'POST',
      body: JSON.stringify(this.state),
    };
    /* if login is correct call this.onHandleLogin() */
    sendRequest('login', init, () => {})
      .then(() => this.onHandleLogin())
  }

  render() {
    return (
      <div>
        <h1>Login page...</h1>
        <form>
          <div>
            <label htmlFor="login">User name:</label>
            <input
              type="text"
              name="login"
              value={this.state.login}
              onChange={this.onChangeInput}
            />
          </div>
          <div>
            <label htmlFor="password">Password:</label>
            <input
              type="text"
              name="password"
              value={this.state.password}
              onChange={this.onChangeInput}
            />
          </div>
          <button onClick={this.onLogin}>Log in</button>
        </form>
      </div>
    );
  }
}

The full example see here https://github.com/Aksana-Tsishchanka/react-routing/blob/master/src/components/Login.jsx

Answer 2

I'm very new also but wanted to help. Along my project in react i found a good solution for that with https://firebase.google.com/ authentication that let me also offer facebook, google and more login methods and recommend you to try it, also has a very good documentation.

I think you should implement something like:

componentDidMount() {
    if (this.state.userLoggedin) {  // you should save in state your logged user
       // actions if user is logged in  
    } else {
       // actions if not user logged in
      }
}