提交表單后如何重定向到 React 中的歡迎組件

Question

在 login.js 中提交表單后，我想重定向到 Welcome.js。 我是 React 的新手。

登錄.js

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : ""
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : ''
        })
    }


    render(){
        console.log(this.state)
        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

歡迎.js

import React from 'react'

const Welcome = () => {
    return(
        <div>
            <h2>Welome</h2>
        </div>
    )
}

export default Welcome;

Answer 1

您還可以根據狀態有條件地顯示不同的組件。

下面，我添加了一個新的“已提交”狀態，並在提交時將其設置為 true。 我根據“已提交”狀態有條件地返回不同的組件；

if (this.state.submitted) return <Welcome />

你修改過的代碼

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : "",
            submitted: false
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : '',
            submitted: true
        })
    }


    render(){
        console.log(this.state)
        if (this.state.submitted) return <Welcome />

        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

Answer 2

這就是React Router用武之地，您可以在您的應用程序中以編程方式導航

npm i react-router-dom

然后用它在任何事情之后導航。 一個例子：

    import { useHistory } from "react-router-dom";

    let history = useHistory(); 
    
    handleSubmit(e){
        e.preventDefault()
        alert("wow");
        history.push("/welcome")
        this.setState({
            email : '',
            password : ''
        });

    }