时间戳

首页 > 解决方案 > 在 React 中隐藏/显示容器以进行登录

javascript - 在 React 中隐藏/显示容器以进行登录

问题描述

我在我的代码中添加了一个登录/注册容器。

Login.class

const Form = ({ initialState = STATE_LOG_IN }) => {
  const [mode, toggleMode] = useToggle(initialState);

  return (
    <Container pose={mode === STATE_LOG_IN ? "signup" : "login"}>
      <div className="container__form container__form--one">
        <FormLogin mode={mode} />
      </div>
      <div className="container__form container__form--two">
        <FormSignup mode={mode} />
      </div>
      <Overlay toggleMode={toggleMode} mode={mode} />
    </Container>
  );
};

export default Form;

当用户单击登录/注册时，此容器是我标题中的调用者，但我不知道如何从登录单击触发显示？

标头代码：

class Header extends React.Component {
    
    constructor(props, context) {
        super(props);
        this.state = {
            showLogin: false};
    }

openLogin = () => {
        this.setState({showLogin: !this.state.showLogin});
    }


const menuLoginRegister = <Nav.Link 
            ref="LoginRegisterModal" eventKey={1} 
            href="#" 
            onClick={this.openLogin}
            bsPrefix="header-menu-item"
            >{TextContents.MenuLoginRegister}</Nav.Link>;


      return (
            ...
            <NavBar>
            ....
            {menuLoginRegister}
            </NavBar>
            <LoginRegisterForm show={this.state.showLogin} 
              onHide={() => this.setState({ showLogin: false })}/>
            </div>

这段代码中的显示被const Form从login类中捕获。

知道如何从标题中控制登录类的可见性吗？

谢谢

标签： javascriptcssreactjs

解决方案

你可以使用 CSS 来显示/隐藏你的组件，方法是根据你的状态添加一个特定的类。像这样的东西：

<LoginRegisterForm className={this.state.showLogin ? 'hidden' : ''}/>

如果是，这将为hidden您的组件添加类。在您的 CSS 中，只需将此类定义为：this.state.showLogintrue

.hidden {
  display: none;
}

推荐阅读