时间戳

首页 > 解决方案 > 如何使用 onClick 转到另一个页面？

reactjs - 如何使用 onClick 转到另一个页面？

问题描述

import React from "react";
import "./LogIn.css";

class LogIn extends React.Component{

    signUp(){
        window.location.replace("signup");
    }
    render(){
        return (
            <div>
                <div>
                <header className="Trello-header">Trello</header>
                </div>
                <br /><br /><br /><br /><br /><br />
                <div className="LogInBox">
                    <center>Log in to Trello</center>
                    <br /><br />
                    <center><input class="Email" type="text" placeholder="Enter email"></input></center><br />
                    <center><input class="Password" type="text" placeholder="Enter password"></input></center><br />
                    <center><button type="button" class="block">Log In</button></center><br />
                    -----------------------------------------------
                    <span>Can't log in?</span>
                    <span>&nbsp; &nbsp; &nbsp;</span>
                    <span onClick={this.signUp}>Sign up for an account</span>
                </div>
            </div>
        )
    }
}
export default LogIn;

当我单击时，this.signUp 方法应将我重定向到 host:3000/signup 页面。我该怎么办？当我单击文本“注册帐户时，它应该将我重定向到注册页面。

谢谢

标签： reactjs

解决方案

你应该使用window.location.href.

import React from "react";
import "./LogIn.css";

class LogIn extends React.Component{

    signUp(){
        window.location.href = "signup";
    }
    render(){
        return (
            <div>
                <div>
                <header className="Trello-header">Trello</header>
                </div>
                <br /><br /><br /><br /><br /><br />
                <div className="LogInBox">
                    <center>Log in to Trello</center>
                    <br /><br />
                    <center><input class="Email" type="text" placeholder="Enter email"></input></center><br />
                    <center><input class="Password" type="text" placeholder="Enter password"></input></center><br />
                    <center><button type="button" class="block">Log In</button></center><br />
                    -----------------------------------------------
                    <span>Can't log in?</span>
                    <span>&nbsp; &nbsp; &nbsp;</span>
                    <span onClick={this.signUp}>Sign up for an account</span>
                </div>
            </div>
        )
    }
}
export default LogIn;

推荐阅读