重定向到另一个html页面，如果登录成功与反应js

-1

我是新来的React，我想知道是否有可能与React js。例如我有一个登录模式，我试图编写一个基本的脚本，并采取代码document.getElementById("email");输入值的输入，但无法正常工作。请帮助我，我可以使用？或者怎么办？请，哦，对不起我的英语：D重定向到另一个html页面，如果登录成功与反应js

来源

2017-04-22 Emmanuel Garcia Martinez

好像你问两个单独的问题在这里？我会鼓励你浏览React文档，其中[你的问题被深入解释]（https://facebook.github.io/react/docs/forms.html）。 –

对不起，并非常感谢您的链接：D –

我很新也想帮忙。沿着我的项目反应，我发现一个很好的解决方案，与https://firebase.google.com/认证，让我也提供Facebook，谷歌和更多的登录方法，并建议您尝试它，也有一个非常好的文档。

我想你应该执行类似：

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 
     } 
}

来源

2017-04-22 15:38:33

嗨，谢谢你的回答，其实我使用的是firebase身份验证，但我知道如何重定向到其他页面是成功的，例如在主页是登录，并且如果成功将您重定向到AppWeb（其他文件或类）。 –

你使用react-router吗？我正在测试它，并且正在管理你的应用中的路由，请检查https://www.npmjs.com/package/react-router –

是的，这是可能的。

您不需要使用document.getElementById（“email”）;检查如何使用
输入https://facebook.github.io/react/docs/forms.html
我建议添加反应路由器https://github.com/reactjs/react-router-tutorial它可以帮助您在正确和优雅的方式需要时重定向用户。

例子：

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> 
    ); 
    } 
}

完整的例子在这里看到https://github.com/Aksana-Tsishchanka/react-routing/blob/master/src/components/Login.jsx

来源

2017-04-22 15:45:49

谢谢你，：D –

重定向到另一个html页面，如果登录成功与反应js

回答

相关问题