javascript - 如何在反应js中切换到另一个组件onclick
问题描述
我在单独的文件中有 2 个组件 SignUp 和 Welcome 。在 SignUp 组件中,我正在检查密码和重新输入密码是否相同。如果它们相同..我必须切换到欢迎组件。
有人可以帮我解决这个问题,因为我是“REACT”的新手,我遇到了一些麻烦。我试过这样的东西,但没有用:
import React, { Component } from 'react';
import './index.css';
import Welcome from './welcome'
class SignUp extends Component {
state = {
pwd : "",
confirm_pwd : "",
}
handlepwd = (event) => {
this.setState({
pwd : event.target.value
});
}
handlecpwd = (event) => {
this.setState({
confirm_pwd : event.target.value
});
}
checkPassword = (event) => {
event.preventDefault();
if(this.state.pwd == this.state.confirm_pwd) {
return <Welcome/>
}
else {
alert("Wrong Password!!! Check Again");
}
}
render() {
return (
<div className="bg">
<h1 className="heading">WELCOME TO STUDENTS LEARNING BYTE</h1>
<div className="login_container">
<form>
<label for="email"><b>Email</b></label><br></br>
<input type="text" placeholder="Enter Email" name="email" required/><br></br>
<label for="psw"><b>Password</b></label><br></br>
<input type="password" placeholder="Enter Password" name="psw" value={this.state.pwd} onChange={this.handlepwd} required/><br></br>
<label for="psw-repeat"><b>Repeat Password</b></label><br></br>
<input type="password" placeholder="Repeat Password" name="psw-repeat" value={this.state.confirm_pwd} onChange={this.handlecpwd} required/><br></br>
<label for="collegeName"><b>College Name</b></label><br></br>
<input type="text" placeholder="Enter Your College Name" name="collegeName" required/><br></br>
<label for="branch"><b>Branch</b></label>
<select name="branch" id="branch">
<option value="CSE">CSE</option>
<option value="ECE">ECE</option>
<option value="IT">IT</option>
<option value="EEE">EEE</option>
<option value="CME">CME</option>
<option value="MECH">MECH</option>
</select><br></br><br></br>
<label for="semester"><b>Semester</b></label><br></br>
<input type="text" name="semester" placeholder="Enter your current semester" required/><br></br>
<label>
<input type="checkbox" name="remember" /> Remember me
</label><br></br>
<div>
<span>
<button onClick={this.checkPassword}>SignUp</button>
</span>
</div>
</form>
</div>
</div>
)
}
}
导出默认注册;通过单击注册按钮,它会调用 checkpassword 函数。
解决方案
您可以使用状态切换到欢迎组件
import React, { Component } from 'react';
import './index.css';
import Welcome from './welcome'
class SignUp extends Component {
state = {
pwd : "",
confirm_pwd : "",
showWelcome:false, //add this
}
handlepwd = (event) => {
this.setState({
pwd : event.target.value
});
}
handlecpwd = (event) => {
this.setState({
confirm_pwd : event.target.value
});
}
checkPassword = (event) => {
event.preventDefault();
if(this.state.pwd == this.state.confirm_pwd) {
this.setState({showWelcome:true}) //set showWelcome as true
}
else {
alert("Wrong Password!!! Check Again");
}
}
render() {
if(this.state.showWelcome)
return <Welcome/>
else
return (
<div className="bg">
<h1 className="heading">WELCOME TO STUDENTS LEARNING BYTE</h1>
<div className="login_container">
<form>
<label for="email"><b>Email</b></label><br></br>
<input type="text" placeholder="Enter Email" name="email" required/><br></br>
<label for="psw"><b>Password</b></label><br></br>
<input type="password" placeholder="Enter Password" name="psw" value={this.state.pwd} onChange={this.handlepwd} required/><br></br>
<label for="psw-repeat"><b>Repeat Password</b></label><br></br>
<input type="password" placeholder="Repeat Password" name="psw-repeat" value={this.state.confirm_pwd} onChange={this.handlecpwd} required/><br></br>
<label for="collegeName"><b>College Name</b></label><br></br>
<input type="text" placeholder="Enter Your College Name" name="collegeName" required/><br></br>
<label for="branch"><b>Branch</b></label>
<select name="branch" id="branch">
<option value="CSE">CSE</option>
<option value="ECE">ECE</option>
<option value="IT">IT</option>
<option value="EEE">EEE</option>
<option value="CME">CME</option>
<option value="MECH">MECH</option>
</select><br></br><br></br>
<label for="semester"><b>Semester</b></label><br></br>
<input type="text" name="semester" placeholder="Enter your current semester" required/><br></br>
<label>
<input type="checkbox" name="remember" /> Remember me
</label><br></br>
<div>
<span>
<button onClick={this.checkPassword}>SignUp</button>
</span>
</div>
</form>
</div>
</div>
)
}
}
推荐阅读
- javascript - 将 json/csv 文件(从 API 获取)保存到电子表格文档而不使用循环 - Google Apps 脚本
- javascript - 正则表达式 - 检查字符串是否包含部分 URL 并转换为链接
- asp.net - 如何将数据从一个视图发送到另一个视图,它是品牌、型号等。它不是一种形式
- python - 在python中将我的部分输出代码更改为字母数字
- javascript - net::ERR_ABORTED 4 在 nextjs 中出现此错误
- neo4j - Neo4J 动态数据模型
- devops - 如何使用具有特定标志值的 DevOps Api 获取工作项列表
- javascript - 如何访问对象数据
- php - password_get_info 返回意外结果
- hadoop - 从 Talend 连接到 Hadoop