如何使用react中的锚点标签在登录和注册表单之间切换

Question

每个人我都是react和webdev的新手。我正在写一个代码，在react中切换登录和注册表单。单击Don't have an account? Create account锚点将隐藏登录表单并取消隐藏注册表单。Already have an account? sign in反之亦然。我想通过添加和删除类form--hidden来实现这一点。这是我所能得到的：

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 = {
loginclassadd: "form",
loginisActive: true,
signupclassadd: "form form--hidden",
signupIsActive: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
const loginclassadd = this.state.loginclassadd;
const signupclassadd = this.state.signupclassadd;
if(this.state.loginisActive && !this.state.signupIsActive){
this.setState({
loginclassadd: loginclassadd.concat(" ", "form--hidden"),
loginisActive: !this.state.loginisActive,
signupclassadd: signupclassadd.replace(" form--hidden", ""),
signupIsActive: !this.state.signupIsActive,                
});
}
else if(this.state.signupIsActive && !this.state.loginisActive){
this.setState({
loginclassadd: loginclassadd.replace(" form--hidden", ""),
loginisActive: !this.state.loginisActive,
signupclassadd: signupclassadd.concat(" ", "form--hidden"),
signupIsActive: !this.state.signupIsActive,                
});
}
}
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={this.state.loginclassadd} handleClick={this.handleClick} />
<FormCreateAccount classadd={this.state.signupclassadd} handleClick={this.handleClick} />
</div>
</div>
</div>
</div>
</div>
);
}
}
// ========================================
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

这是我创建的/src文件夹中的index.js文件。我的/src目录的内容是：

• index.js
• index.css

我已经使用npx create-react-app app-name来初始化项目。

代码显然还不完整，我正在一步一步地进行。但我真的被困在这里，任何帮助/指导都非常感谢。

这里的问题是点击

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

取消隐藏注册表单，并在返回初始状态之前非常短暂地隐藏登录表单。

此外，我一直在使用npm start来查看我的react-webapp的输出。

Answer 1

问题是您正在操作real DOM，React也在操作DOM。您可以阅读有关虚拟DOM和真实DOM的内容。

若要有条件地渲染组件，需要切换组件状态并返回相对于状态的组件。

class Page extends Component {
state = {
form: "login",
};
render() {
return (
<div>
{this.state.form === "login" ? <LoginForm /> : <RegisterForm />}
{this.state.form === "login" ? (
<a
href="#"
onClick={() => this.setState((s) => ({ ...s, form: "register" }))}
>
Don't have an account ?
</a>
) : (
<a
href="#"
onClick={() => this.setState((s) => ({ ...s, form: "login" }))}
>
Already have an account ?
</a>
)}
</div>
);
}
}