Question

我的侧边栏在响应模式下无法正常工作，我使用@media作为页面的控制器宽度，当响应时我使用position：absolute的侧边栏按钮停留在内容中，我为onclick创建了一个状态更改此位置：相对但不起作用，请帮助。该页面在正常模式下正常工作，并且在模式下也响应（Ctrl + Shift + I），但是我单击按钮时发生问题。

Sidebar.js

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      classStyle: "sidebar"
    };
  }

  // handleSidebar(value) {
  //  this.setState = ({ classStyle : value });
  // }

   handleSidebar = (value) => { 
    this.setState = ({ classStyle: value }); 
  }


render() {
  return (
    
    <div className={this.state.classStyle}>
      <Navbar bg="light" variant="light" sticky="top" expand="lg">
        <Navbar.Toggle aria-controls="navbarSupportedContent" onClick={() => handleSidebar("sidebarR")} />
        <Navbar.Collapse id="navbarSupportedContent">

Index.css


@media (max-width: 600px)
{
    .sidebar
    {
        position: absolute;
    }
    .sidebarR 
    {
        position: relative;
    }
}

Answer 1

在handleSidebar上致电onClick时，您需要使用this

Navbar.Toggle aria-controls="navbarSupportedContent" onClick={() => this.handleSidebar("sidebarR")} />

Answer 2

请尝试这个，它可以正常工作

在组件中替换此功能

 handleSidebar = () => { 
     console.log("clicked");
     this.setState({ classStyle: "sidebarR" }); 
   }

如果要切换类，请使用以下功能，

 handleSidebar = () => { 
     console.log("clicked");
     const classStyle = this.state.classStyle == "sidebar" ? "sidebarR" : "sidebar";
     this.setState({ classStyle: classStyle }); 
   }

没有导航栏组件的运行组件，

import React,{Component} from 'react';
import './Menu.css';


export default class Menu extends Component {
 
  
    state = {
       classStyle: "sidebar"
     };
   
 
    handleSidebar = () => { 
     console.log("clicked");
     this.setState({ classStyle: "sidebarR" }); 
   }
 
 
 render() {
   return (
     
     <div className={this.state.classStyle}>
       
         <p onClick={() => this.handleSidebar()} >Menu</p>
     </div>
   )
 }
}

处理状态后如何重新加载页面？

2 个答案: