下拉菜单不显示 onClick React.js

Question

你好，所以我有一个问题，当我点击我的导航栏图标时，它应该打开一个下拉菜单，所以当我点击它时，它会更改 div 名称，但 css 道具保持初始 div class 任何人都可以帮助我，我不知道我哪里做错了我认为它应该有效

  <div className='action'>
        <div className='profile' onClick={this.menuToggle}>
          <img src={Avatar} alt="Avatar" />
        </div>

        <div className={`menuDropdown ${active ? "active" : ""}`}>
          <ul>
            <li><a href='#' />Ver Perfil</li>
            <li><a href='#' />Logout</li>
          </ul>
        </div>
      </div>

    class NavBarClient extends Component {
  constructor() {
    super();
    this.state = {
      active: false

    };

  }



  menuToggle = () => {

    this.setState({ active: !this.state.active });

  }

  render() {
    const { active } = this.state;

.menuDropdown{
    position: absolute;
    top: 120px;
    right: -10px;
    padding: 10px 20px;
    background-color: #fff;
    width: 200px;
    box-sizing: 0 5px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
    .active{
        top:80px;
        visibility: visible;
        opacity: 1;
    }
    
}

Answer 1

在 css 文件中，您应该从 .menuDropdown 对象中获取 .active css 对象。

.menuDropdown{
    position: absolute;
    top: 120px;
    right: -10px;
    padding: 10px 20px;
    background-color: #fff;
    width: 200px;
    box-sizing: 0 5px 25px rgba(0,0,0,0.1);
    border-radius: 15px;
    transition: 0.5s;
    visibility: hidden;
    opacity: 0;
}

    .active{
        top:80px;
        visibility: visible;
        opacity: 1;
    }

下拉菜单不显示 onClick React.js

Dropdown dont show onClick React.js

javascript

css

reactjs

dropdown