React中使用锚点标签切换登录/注册表单的问题求助

问题根源 #

你遇到的问题是因为锚点标签(<a>)的href="./"会触发页面刷新，React组件会重新挂载，导致状态被重置回初始值。所以点击后表单状态只会短暂切换，随后页面刷新回到初始状态。

修复步骤 #

1. 阻止a标签的默认跳转行为 #

修改handleClick方法，添加事件参数并调用preventDefault()，阻止页面刷新：

handleClick(e){
    e.preventDefault(); // 阻止默认跳转行为
    // 原状态切换逻辑...
}

同时把a标签的href改为"#"，避免不必要的跳转提示：

<a className="form--link" href="#" id="linkcreateaccount" onClick={this.props.handleClick} >Don't have an account? Create account</a>

<a className="form--link" href="#" id="linklogin" onClick={this.props.handleClick} >Already have an account? Sign in</a>

2. 简化状态管理（可选但推荐） #

你当前的状态同时维护了多组冗余变量，其实只需要一个状态变量就能控制两个表单的显示隐藏，减少代码复杂度：

constructor(props){
    super(props);
    this.state = {
        isLoginActive: true // 仅用一个状态标记是否显示登录表单
    };
    this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
    e.preventDefault();
    this.setState(prevState => ({
        isLoginActive: !prevState.isLoginActive
    }));
}

渲染时动态生成class：

<FormLogin classadd={`form ${this.state.isLoginActive ? '' : 'form--hidden'}`} handleClick={this.handleClick} />
<FormCreateAccount classadd={`form ${this.state.isLoginActive ? 'form--hidden' : ''}`} handleClick={this.handleClick} />

优化后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import image from './computer.svg';
import cimg from './aurionpro-Logo_Color-1-01_Aurionpro-Logo-2022-color-.svg';

function Form__Input__error(props){
    return (
        <div className="form--input--error--message">{props.message}</div>
    );
}
class Form__Input extends React.Component{
    render() {
        return (
            <div className="form--input--group">
                <input type={this.props.type} className="form--input" autoFocus placeholder={this.props.pholder}></input>
                <Form__Input__error message="Username must be at least 10 characters in length"/>
            </div>
        );
    }
}
function FormError(props){
    return(
        <div className="form--message form--message--error">{props.message}</div>
    );
}
class FormLogin extends React.Component {
    render() {
        return (
            <form className={this.props.classadd} >
                <h1 className="form--title">Login</h1>
                <FormError message="Invalid Login Id/Password"/>
                <Form__Input type="text" pholder="Username or email"/>
                <Form__Input type="password" pholder="Password" />
                <button className="form--button" type="submit">Continue</button>
                <p className="form--text">
                    <a className="form--link" href="#" >Forgot your password?</a>
                </p>
                <p className="form--text">
                    <a className="form--link" href="#" id="linkcreateaccount" onClick={this.props.handleClick} >Don't have an account? Create account</a>
                </p>
            </form>
        );
    }
}
class FormCreateAccount extends React.Component{
    render() {
        return (
            <form className={this.props.classadd}>
                <h1 className="form--title">Create Account</h1>
                <FormError message="Invalid Login Id/Password"/>
                <Form__Input type="text" pholder="Username or email"/>
                <Form__Input type="text" pholder="EmailAddress"/>
                <Form__Input type="password" pholder="Password" />
                <Form__Input type="password" pholder="Confirm password" />
                <button className="form--button" type="submit">Continue</button>
                <p className="form--text">
                    <a className="form--link" href="#" id="linklogin" onClick={this.props.handleClick} >Already have an account? Sign in</a>
                </p>
            </form>
        );
    }
}
class Page extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isLoginActive: true
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e){
        e.preventDefault();
        this.setState(prevState => ({
            isLoginActive: !prevState.isLoginActive
        }));
    }
    render() {
        return (
            <div className="container">
                <div className="container--img">
                    <img className="cimg" src={cimg} alt="Aurionpro svg"></img>
                </div>
                <div className="page">
                    <div className="page--table">
                        <div className="page--table--column">
                            <img className="wimg" src={image} alt="women on computer" />
                        </div>
                        <div className="page--table--column form--container">
                            <div className="page--table content-center">
                                <FormLogin 
                                    classadd={`form ${this.state.isLoginActive ? '' : 'form--hidden'}`} 
                                    handleClick={this.handleClick} 
                                />
                                <FormCreateAccount 
                                    classadd={`form ${this.state.isLoginActive ? 'form--hidden' : ''}`} 
                                    handleClick={this.handleClick} 
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

内容的提问来源于stack exchange，提问作者Siddharth Kumar Jha