Я попытался выяснить, как я могу использовать эти две кнопки «Вход» и «Зарегистрироваться», которые будут переключать поле «Вход и регистрация» назад вперед.
Я не мог понять... Кто-нибудь может это решить?
это мой код. Я хотел бы вызвать метод «выбранный контроллер» из элемента div. Но тогда Невозможно прочитать свойство 'bind' неопределенного.
Навигация.js
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import "../components/pages/Forms/MainScreen";
import Dropdown from "../components//pages/dropdowns/dropdowns";
import hamburger from "../images/menu.svg";
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
isExpanded: false
};
}
handleToggle(e) {
e.preventDefault();
this.setState(prevState => ({
isExpanded: !prevState.isExpanded, // negate the previous expanded state
}));
}
render() {
const { isExpanded } = this.state;
return (
<Router>
<div className="NavbarContainer">
<div className="mobilecontainer LeftNav">
<h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
<div className="hamburger inlinev" >
<img
onClick={e => this.handleToggle(e)}
alt="menubtn"
src={hamburger}
/>
</div>
</div>
<ul className={`NavBar collapsed ${isExpanded ? "is-expanded" : ""}`}>
<Dropdown/>
<li className="RightNav"><Link to="/">Host Your Space</Link></li>
<li className="RightNav"><Link to="/">About Us</Link></li>
<li className="RightNav"><Link to="/">Contact Us</Link></li>
<div className="btnflexright">
<div
className={"controller " + (this.state.isLoginOpen
? "selected-controller"
: "")}
onClick={this
.showLoginBox
.bind(this)}>
Login
</div>
<div
className={"controller " + (this.state.isRegisterOpen
? "selected-controller"
: "")}
onClick={this
.showRegisterBox
.bind(this)}>
Sign up
</div>
</div>
</ul>
</div>
</Router>
);
}
}
export default Navigation;
Это главный экран, на котором будет отображаться форма входа и входа:
import React from 'react';
import RegisterBox from '../Forms/Register'
import LoginBox from '../Forms/Register'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoginOpen: true,
isRegisterOpen: false
};
}
showLoginBox() {
this.setState({isLoginOpen: true, isRegisterOpen: false});
}
showRegisterBox() {
this.setState({isRegisterOpen: true, isLoginOpen: false});
}
render() {
return (
<div>
<div className="root-container">
{this.state.isLoginOpen && <LoginBox/>}
{this.state.isRegisterOpen && <RegisterBox/>}
</div>
</div>
)
}
}
export default App;
Форма входа и регистрации — это одно и то же, но в двух разных файлах: Login.js и Register,js. Сейчас я покажу код этого файла.
//Login Box
import React from 'react';
class LoginBox extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<div className="formContent modal-main">
<h2>Welcome Back <span>Brandon!</span></h2>
<form>
<input
type="text"
name="email"
placeholder="Email Address"
/>
<input
name="password"
type="text"
placeholder="Password"
/>
<div className="passContent">
<div className="checkingPass">
<input
className="inline"
type="checkbox"
name="check"
value="Remember Password"
/>
<span
className="inline">
Remember Password
</span>
</div>
<p
className="passFont">
Forgot Password
</p>
</div>
<input
className="formmbtn"
type="button"
name="button"
alue="Login"
/>
<div
className="social-media-button">
<input
className="clearbtn"
type="button"
name="button"
value="Sign in with Facebook"
/>
<div
className="divider"
/>
<input
className="clearbtn"
type="button"
name="button"
value="Sign in with Facebook"
/>
</div>
<p
className="passFont">
Don't have an account?
<span>Sign up</span>
</p>
</form>
</div>
</div>
)
}
}
export default LoginBox;
showRegisterBox
иshowLoginBox
к компонентуApp
? 15.01.2020Navigation.js
Большое спасибо за подробное объяснение мне это нужно 15.01.2020<Navigation showRegisterBox={this.showRegisterBox.bind(this)} showLoginBox={this.showLoginBox.bind(this)}/>
Я поместил это в файл home.js, где все, что я живу на домашней странице, это правильный путь 15.01.2020