大佬教程收集整理的这篇文章主要介绍了在React JS中忘记密码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
请尝试以下示例：
import React from "react";
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {forgot: false};
}
login() {
alert('Login will work here');
}
forgot() {
this.setState({forgot: true})
}
render() {
return (
<div>
{this.state.forgot === false && <div>
Username: <input/> <br/>
Password: <input/><br/>
<button onClick={this.forgot.bind(this)}>Forgot</button>
<button onClick={this.login.bind(this)}>Login</button>
</div>}
{this.state.forgot === true && <ForgotPassword/>}
</div>
);
}
}
class ForgotPassword extends React.Component {
reset() {
alert('Password is sent to your email');
}
render() {
return (<div><h1>Write your email</h1>
<input/>
<button onClick={this.reset.bind(this)}>reset Password</button>
</div>)
}
}
在我的 登录 页面中，当我单击此按钮转到正确的页面时，需要一个按钮“忘记密码”。
在我当前的代码中，当我单击“忘记密码”时，它显示在登录名下，这意味着在同一页面上我会看到“登录名”和“忘记密码”。
我需要的只是看“忘记密码”页面。
这是我的代码：
import React from "react";
import ForgetPage from "../ForgetPasswrod/Forgotpass"
import {Link,useParams,useRouteMatch,Route,Switch,BrowserRouter} from 'react-router-dom';
class Forget extends React.Component{
Forget password -
render(){
// let match = useRouteMatch();
return(
<div>
<BrowserRouter>
{" "} <Link to="/forgetPassword" className="forget">Forgot password?</Link>
<Switch>
<Route path="/forgetPassword" exact strict component={(ForgetPage)} />
</Switch>
</BrowserRouter>
</div>);
}
}
export default Forget;
登录页面
import React from "react";
import Username from "./UserName";
import Password from "./Password";
import Submit from "./Submit";
import Rememberme from "./RememberMe";
import Cancel from "./Cancel";
import ForgetPass from "./Forget"
class Hub extends React.Component {
state={userName:"Log",password : "In"}
callbackUsername=(user)=>{
this.setState({userName: user});
console.log("---"+user)
}
callbackPassword = (pass) => {
this.setState({ password: pass});
}
render(){
return(
<div>
<h1> {this.state.userName} {this.state.password}</h1>
<form className="modal-content animate">
<Username userHub={this.callbackUsername}/>
<Password passHub={this.callbackPassword}/>
<Submit/>
<Rememberme/>
<div className="container">
<Cancel/>
<ForgetPass/>
</div>
</form>
</div>
);
}
}
export default Hub;
以上是大佬教程为你收集整理的在React JS中忘记密码全部内容，希望文章能够帮你解决在React JS中忘记密码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。