时间戳

首页 > 解决方案 > 新反应。即时通讯有导航栏的问题。js代码没有响应

reactjs - 新反应。即时通讯有导航栏的问题。js代码没有响应

问题描述

任何帮助将非常感激。我又是编码和反应的新手。先感谢您。

import React, {Component} from 'react';

class Nav extends Component { 

    openNav = () =>{
        document.getElementById("mySidenav");
      }
      
      closeNav = () => {
        document.getElementById("mySidenav");
      } 

    render() { 
 
        return(   
            <div id="main">
            <div id="mySidenav" class="sidenav">
                 <a href="javascript:void(0)" class="closebtn" onclick={this.closeNav()}>&times;</a>
                 <a href="#">About</a>
                 <a href="#">Services</a>
                 <a href="#">Clients</a>
                 <a href="#">Contact</a>
            </div>
                 <h2>Animated Sidenav Example</h2>
                 <p>Click on the element below to open the side navigation menu.</p>
                 <span onclick={this.openNav()}>open</span>
                 <script>
                     
                 </script>

            </div>
            
        );
    }
}
export default Nav;

标签： reactjs

解决方案

您正在调用该函数，但您没有在其中做任何实质性的事情。您需要一个可用于切换某些状态变量的状态变量。更改状态变量将导致rerender，这就是您想要的。

import React, {Component} from 'react';

class Nav extends Component { 
     constructor(){
    this.state = {
           'show' : false;
     }
    }
    openNav = () =>{
         this.setState(prevState => !prevState);
      }
      
      closeNav = () => {
          this.setState(prevState => !prevState);      
     } 

    render() { 
 
        return(   
            <div id="main">
            {this.state.show && <div id="mySidenav" class="sidenav">
                 <a href="javascript:void(0)" class="closebtn" onclick={this.closeNav()}>&times;</a>
                 <a href="#">About</a>
                 <a href="#">Services</a>
                 <a href="#">Clients</a>
                 <a href="#">Contact</a>
            </div>}
                 <h2>Animated Sidenav Example</h2>
                 <p>Click on the element below to open the side navigation menu.</p>
                 <span onclick={this.openNav()}>open</span>
                 <script>
                     
                 </script>

            </div>
            
        );
    }
}
export default Nav;

因此，您可以切换状态并基于该显示/隐藏组件。

像 , b 这样的表达式只有在为真a && b时才被评估。a如果a是假码达不到b。并且当 b 被评估时，如果它是一个真值（导航代码块是），则返回它。

我特意保留了上面的两个函数。您可能会注意到您可以使用一个。类似的东西toggleNav()。

注意：总是更好地refs在 react 中使用而不是 document.querySelector。

推荐阅读