0

我正在尝试使用 Reactstrap（Bootstrap v4 的 React 组件）和 React-Router 构建登录/注册界面。我在模式上有可用的登录和注册按钮。

一旦用户单击“登录”或“注册”，我希望将模式中的按钮组件换成输入组件，以便用户可以输入他们的信息。我正在尝试使用 React-Router 执行此操作，以便可以在模态中切换组件，而无需转到新页面或打开新模态。

这样的事情可行吗？模态当前不会打开新的 url，它只是出现在现有页面上。我在下面包含了我的代码：

模态模板

 <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
               <ModalHeader className="text-center">Get Started</ModalHeader>
               <ModalBody id="ModalBody">
                 <Row id="LoginRow">
                     <Router>
                       <Switch>
                         <Route exact path="/" component={SignUpSignIn} />
                         <Route exact path="/SignUp" component={SignIn} />
                         <Route exact path="/SignIn" component={SignUp} />
                       </Switch>
                     </Router>
                  </Row>
               </ModalBody>
             </Modal>

基本注册/登录组件

    export default class SignUpSignIn extends Component {
      render () {
        return (
        <div id="SignUpSignInDiv">
          <Col md="12" sm="12" xs="12" className="text-center">
            <Button id="SignUpButton" color="primary" href="/SignUp" onClick={this.toggle}>Sign Up</Button>
           </Col>
           <Col md="12" sm="12" xs="12" className="text-center">
             <Button id="SignInButton" color="primary" href="/SignIn" onClick={this.toggle}>Sign In</Button>
            </Col>
        </div>
        )
      }
}

注册组件

    export default class SignUp extends Component {
  render () {
    return (
    <div>
      <Col md="12" sm="12" xs="12" className="text-center">
        <Form />
       </Col>
    </div>
    )
  }
}

登录组件

export default class SignIn extends Component {
  render () {
    return (
    <div>
      <Col md="12" sm="12" xs="12" className="text-center">
        <Form />
       </Col>
    </div>
    )
  }
}
4

0 回答 0