0
エラーが発生しているので、SignUpコンポーネント以外のすべてのコンポーネントが表示されています。 SignUpコンポーネントのjsxで意図的にエラーを作成すると、コンポーネントがレンダリングされているとは思えますが、画面上に表示されないというエラーが表示されます。 SignUp.jsファイル、SignUp.cssファイル、およびApp.jsファイルを提供しています。ご協力いただきありがとうございます。エラーが発生していないのに、反応コンポーネントが表示されない
SignUp.js
import React, {Component} from 'react';
import '../stylesheets/SignUp.css';
import Auth from '../auth.js';
import NavBar from './NavBar.js';
const ENTER = 13;
var newAuth = new Auth();
class SignUp extends Component {
_validatePassword=(password,passwordConfirm)=>{
var lengthy = password.length < 6
var samePassword = password !== passwordConfirm
if(lengthy || samePassword){
return false
}
else{
return true
}
}
_validateEmail=(email)=>{
// var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// return re.test(email)
}
_findError(email,password){
return{
email: email,
password: password
}
}
_handleSignup =() => {
var user = {
name:this.refs.fullname.value,
email:this.refs.email.value,
password:this.refs.password.value
}
if (user.name && user.email && user.password) {
newAuth.signUp(user)
.then(res => this.props.router.push('/login'))
.catch(console.error);
}
else {
this.setState({error: "Please fill in all fields"});
}
}
_handleTyping = (e) => {
if (this.state && this.state.error) {
this.setState({ error: null })
}
if (e.keyCode===ENTER) {
this._handleSignup()
}
}
render(){
return(
<div className="signup">
<NavBar/>
<div className="group">
<input className="page-input" type="text" ref="fullname"
onKeyUp={this._handleTyping}
/>
<span className="highlight"></span>
<span className="bar"></span>
<label className="modal-label">Full Name</label>
</div>
<div className="group">
<input className="page-input" type="text" ref="email"
onKeyUp={this._handleTyping}
/>
<span className="highlight"></span>
<span className="bar"></span>
<label className="modal-label">Email</label>
</div>
<div className="group">
<input className="page-input" type="password" ref="password"
onKeyUp={this._handleTyping}
/>
<span className="highlight"></span>
<span className="bar"></span>
<label className="modal-label">Password</label>
</div>
<div className="group">
<input className="page-input" type="password" ref="passwordConfirm"
onKeyUp={this._handleTyping}
/>
<span className="highlight"></span>
<span className="bar"></span>
<label className="modal-label">Confirm Password</label>
<button className="signup-btn" onClick={this._handleSignup}><span>Sign Up</span></button>
</div>
{this.state && this.state.error ?
<p>{this.state.error}</p>
: null
}
</div>
)
}
}
export default SignUp;
SignUp.css
.singup {
display: flex;
flex-direction: column;
height: 350px;
margin-top: 55px;
}
.page-input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:190px;
border:none;
border-bottom:1px solid #757575;
}
.page-input:focus { outline:none; }
.page-input:focus ~ label, .page-input:valid ~ label {
top:-20px;
font-size:14px;
}
label {
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar { position:relative; display:block; width:190px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:black;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.page-input:focus ~ .bar:before, .page-input:focus ~ .bar:after {
width:50%;
}
.group{
display: flex;
flex-direction: column;
align-items: center;
}
highlight {
position:absolute;
height:60%;
width:200px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
.page-input:focus ~ .highlight {
-webkit-animation:.page-inputHighlighter 0.3s ease;
-moz-animation:.page-inputHighlighter 0.3s ease;
animation:.page-inputHighlighter 0.3s ease;
}
.signup-btn {
position: relative;
display: block;
/*margin: 30px auto;*/
margin-top:50px;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.signup-btn:hover, .signup-btn:focus {
background-color: #27ae60;
}
.signup-btn > * {
position: relative;
}
.signup-btn span {
display: block;
padding: 12px 24px;
}
.signup-btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.signup-btn:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out;
}
App.js
import React, { Component } from 'react';
import DietPlan from './components/DietPlan.js';
import LoseWeight from './components/LoseWeight.js';
import SignUp from './components/SignUp.js';
import FrontPage from'./components/FrontPage.js';
import LogIn from'./components/LogIn.js';
import BuildMuscleForm from'./components/BuildMuscleForm';
import {Route} from"react-router";
import {BrowserRouter} from"react-router-dom";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path={"/"} component={FrontPage}/>
<Route path={"/singup"} component={SignUp}/>
<Route path={"/login"} component={LogIn}/>
<Route path={"/buildmuscle"} component={BuildMuscleForm}/>
<Route path={"/loseweight"} component={LoseWeight}/>
<Route path={"/planning"} component={DietPlan}/>
</div>
</BrowserRouter>
);
}
}
export default App;
イムはかなり他のすべてのコンポーネントが表示されるので、ここで起こっていただきました！へと困惑します。すべての私の取得は、空白のページとエラーはありません。私は気づかなかったことは本当に簡単なことかもしれません。助けてくれてありがとう
デベロッパーツールコンソールの –
あなたのアプリケーションコンポーネントでは、 'path = {"/singup "}'はこれが意図的なものですか？ – MEnf
"/ Signup"パスに一致するコンポーネントがないため、何もレンダリングしていないパスに移動している可能性があります。 – MEnf