![忘记]( "忘记")
本文介绍了在 React JS 中忘记密码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的登录页面中，我有一个忘记密码"按钮，我需要，当我点击这个按钮进入正确的页面时.
在我当前的代码中，当我单击忘记密码"时，它会显示在登录名下方，这意味着在同一页面上我会看到登录名"和忘记密码".
我只需要看到忘记密码"页面.
这是我的代码:
从反应"导入反应；从../ForgetPasswrod/Forgotpass"导入 ForgetPage从'react-router-dom'导入{Link，useParams，useRouteMatch，Route，Switch，BrowserRouter}；class Forget 扩展 React.Component{忘记密码 -使成为(){//让匹配 = useRouteMatch();返回(<div><浏览器路由器>{" "} <Link to="/forgetPassword" className="forget">忘记密码?</Link><开关><Route path="/forgetPassword" 精确的严格组件={(ForgetPage)}/></开关></BrowserRouter>);}}导出默认忘记；
登录页面
从react"导入React；从./UserName"导入用户名；从./Password"导入密码；从./Submit"导入提交；从./RememberMe"导入Rememberme；从./Cancel"导入取消；从./Forget"导入 ForgetPassclass Hub 扩展 React.Component {状态={用户名:登录"，密码:在"}回调用户名=(用户)=>{this.setState({用户名: 用户});console.log("---"+用户)}callbackPassword = (pass) =>{this.setState({密码:pass});}使成为(){返回(<div><h1>{this.state.userName} {this.state.password}</h1><form className="modal-content animate"><用户名 userHub={this.callbackUsername}/><密码 passHub={this.callbackPassword}/><提交/><记住我/><div className="容器"><取消/><忘记通行证/>
</表单>
);}}导出默认集线器；
解决方案
请试试这个例子:
从react"导入React；导出默认类登录扩展 React.Component {构造函数(道具){超级(道具)；this.state = {忘记:假}；}登录() {alert('登录将在这里工作');}忘记() {this.setState({忘记: true})}使成为() {返回 (<div>{this.state.forgot === false &&<div>用户名:<br/>密码:<input/><br/><button onClick={this.forgot.bind(this)}>忘记</button><button onClick={this.login.bind(this)}>登录</button></div>}{this.state.forgot === true &&<忘记密码/>}
);}}class ForgotPassword 扩展 React.Component {重启() {alert('密码已发送至您的邮箱');}使成为() {return (<div><h1>写你的电子邮件</h1><输入/><button onClick={this.reset.bind(this)}>重置密码</button></div>)}}
In my log in page I have a button "Forget my password",I need, when I click in this button to go to the correct page.
In my current code, when I click "forget my password", it shows under the login, which mean at the same page I see the "login" and the "forget password".
What I need is to see just the "forget my password" page.
Here is my code :
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;
The page of log in
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;
解决方案
Please try this example:
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>)
}
}
这篇关于在 React JS 中忘记密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！