嘿,我知道标题有点混乱,但是我敢肯定,您会在这里更好地理解我的需求。因此,我试图建立一个像instagram这样的社交媒体应用,此刻我正在构建登录组件,但由于我仍在学习如何使用react,因此陷入了僵局。所以这里有我的登录组件:
function LoginMenu (){
const [email, setEmail] = useState(null);
const [password, setPassword] = useState(null);
return (
<div style = {styles2}>
<form className="form-signin" style = {styles}>
<div className="form-label-group" >
<label htmlFor="inputEmail">
Email address
<input
type="email"
id="inputEmail"
className="form-control"
placeholder="Email address"
required
autoFocus
onChange = {event => setEmail(event.target.value)}
></input>
</label>
</div>
<div className="form-label-group" >
<label htmlFor="inputPassword">
Password
<input
type="password"
id="inputPassword"
className="form-control"
placeholder="Password"
required
onChange = {event => setPassword(event.target.value)}
></input>
</label>
</div>
<button
className="btn btn-lg btn-primary btn-block"
onClick = {() => <MainApp/>}
type="submit"
>
Sign in
</button>
</form>
</div>
);
}我要做的就是,当我单击按钮时,MainApp组件内容将接管页面,而登录菜单将消失,就像在每个具有登录屏幕的站点中发生的一样。
嘿,我知道标题有点混乱,但是我敢肯定,您会在这里更好地理解我的需求。因此,我试图建立一个像instagram这样的社交媒体应用,此刻我正在建立登录信息...
我建议您学习ReactJs中的Router,它可以在多个页面之间导航。