reactjs - 如何修复组件显示重叠
问题描述
我的目标是在登录页面中选择登录按钮时显示组件“登录”。但是,选择按钮后,着陆页中的组件仍然显示。这里有一些图片说明了这个问题。
点击前:在此处输入图片描述
点击后:在此处输入图片描述
问题是第二张图。最大的原因可能是什么?
非常感谢您的输入。
代码 - 主页(LandingPage):
import React from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Link } from 'react-router-dom';
import * as ROUTES from '../../routes.jsx';
import './LandingPage.css'
export default class LandingPage extends React.Component {
render() {
return(
<div>
<Button className="signInButton" variant="light"><Link to={ROUTES.SIGN_IN}>Sign In</Link></Button>
<h1 className="landingBanner" >Streamosphere</h1>
<SignUpFormBase/>
</div>
);
}
}
const INITIAL_STATE = {
email: '',
password: '',
error: null,
};
export default class SignUpFormBase extends React.Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
console.log("Props");
console.log(this.props);
const { history } = this.props;
const { email, password } = this.state;
this.props.firebase
.doCreateUserWithEmailAndPassword(email, password)
.then(authUser => {
this.setState({ ...INITIAL_STATE });
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const {
email,
password,
error,
} = this.state;
const isInvalid = password === '' || email === '';
return (
<Form className="signUpForm"
onSubmit={this.onSubmit}>
<h1 className="signUpBanner">Sign Up </h1>
<Form.Group controlId="formSignUpEmail">
<Form.Label>Email address</Form.Label>
<Form.Control name="email"
value={email}
onChange={this.onChange}
type="email"
placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formSignUpPassword">
<Form.Label>Password</Form.Label>
<Form.Control name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password" />
</Form.Group>
<Button type="submit"
disabled={isInvalid}
className="signUpButton"
variant="light" >
Sign Up
</Button>
{error && <p>{error.message}</p>}
</Form>
);
}
}
const SignUpLink = () => (
<p>
Already have an account? <Link to={ROUTES.SIGN_IN}>Sign In</Link>
</p>
);
登录(带有登录组件的文件):
import React, { Component } from 'react';
import SignUpLink from './LandingPage.jsx'
import * as ROUTES from '../../routes.jsx';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './LandingPage.css'
export default class SignInPage extends Component {
render() {
return(
<div>
<h1 className="landingBanner" >Streamosphere</h1>
<SignInFormBase/>
<SignUpLink />
</div>
);
}
}
const INITIAL_STATE = {
email: '',
password: '',
error: null,
};
export default class SignInFormBase extends Component {
constructor(props) {
super(props);
this.state = { ...INITIAL_STATE };
}
onSubmit = event => {
const { email, password } = this.state;
this.props.firebase
.doSignInWithEmailAndPassword(email, password)
.then(() => {
this.setState({ ...INITIAL_STATE });
this.props.history.push(ROUTES.HOME);
})
.catch(error => {
this.setState({ error });
});
event.preventDefault();
};
onChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const { email, password, error } = this.state;
const isInvalid = password === '' || email === '';
return (
<Form className="signUpForm"
onSubmit={this.onSubmit}>
<h1 className="signUpBanner"> Sign In </h1>
<Form.Group controlId="formSignInEmail">
<Form.Label>Email address</Form.Label>
<Form.Control name="email"
value={email}
onChange={this.onChange}
type="email"
placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formSignInPassword">
<Form.Label>Password</Form.Label>
<Form.Control name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password" />
</Form.Group>
<Button type="submit"
disabled={isInvalid}
className="signUpButton"
variant="light" >
Sign In
</Button>
{error && <p>{error.message}</p>}
</Form>
);
}
网址路由(routes.jsx):
export const LANDING = '/';
export const SIGN_IN = '/signin';
export const HOME = '/home';
export const ACCOUNT = '/account';
App.jsx(入口点,其中 LandingPage 是呈现的第一个页面):
import { Route } from 'react-router'
import React from 'react';
import LandingPage from './components/containers/LandingPage'
import SignInPage from './components/containers/SignIn'
import HomePage from './components/containers/HomePage'
import * as ROUTES from './routes.jsx';
class App extends React.Component {
render() {
return (
<div>
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<Route path={ROUTES.HOME} component={HomePage} />
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
</div>
);
}
}
export default App;
解决方案
这是因为Link
from react-router-dom
。您可以通过重新加载整个页面来规避它。例如,<a href="/sign-in></a>
改为使用。
推荐阅读
- arduino - Arduino Uno R3 上的意外编码错误
- html - 无法验证具有“必需”属性的输入
- python - 用于表格数据的自动编码器的高 mse 损失
- node.js - 通过 Travis CI API 传递 Node.JS 运行参数
- javascript - 带有 Next.js 的自定义脚本
- c++ - 完美的转发和dll导出
- angular6 - Valor Software - ngx bootstrap Alert 组件在 Angular 6 中以编程方式具有关闭按钮?
- c# - 如何使用 C# 显示 XML 的层次结构
- php - 循环遍历数组相关模型,创建一个嵌套数组
- sql-server - 使用 SSIS 远程连接到 SQL Server