如何在React中用其他组件内容替换当前组件内容

问题描述 投票:0回答:1

嘿,我知道标题有点混乱,但是我敢肯定,您会在这里更好地理解我的需求。因此,我试图建立一个像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这样的社交媒体应用,此刻我正在建立登录信息...

javascript reactjs babeljs jsx
1个回答
0
投票

我建议您学习ReactJs中的Router,它可以在多个页面之间导航。

© www.soinside.com 2019 - 2024. All rights reserved.