如何在反應js中切換到另一個組件onclick

Question

我在單獨的文件中有 2 個組件 SignUp 和 Welcome 。 在注冊組件中，我正在檢查密碼和重新輸入密碼是否相同。 如果它們相同..我必須切換到歡迎組件。

有人可以幫我解決這個問題，因為我是“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>
        )
    }
}

導出默認注冊； 通過單擊注冊按鈕，它會調用檢查密碼 function。

Answer 1

您可以使用 state 切換到歡迎組件

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

Answer 2

你可以做這樣的事情

import React ,{ Component } from "react";
import Welcome from './Welcome;

class Test extends Component {
    state = { 
        pwd : "",
        confirm_pwd : "",
        isLoggedIn: false
     }

     checkPassword = (event) => {
      event.preventDefault();
      if(this.state.pwd == this.state.confirm_pwd) {
          this.setState({isLoggedIn : true})
      }
      else {
          alert("Wrong Password!!! Check Again");
      }
   }

    render() { 
        return ( 
         <div>
           {isLoggedIn? <Welcome/> : <></>}
           
           /// login form

         </div>
        )
           
    }
}
 
export default Test;

但更好的方法是：

https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications