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

Question

我在响应模式下的侧边栏无法正常工作，我使用@media 控制页面宽度，响应时我使用 position:absolute 让侧边栏按钮停留在内容上，我创建了一个状态因为 onclick 处于活动状态，请更改此 position:relative 但不起作用，请提供帮助。正常模式下的页面功能正确，模式响应（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

当您在 onClick 上调用 handleSidebar 时，您需要使用 this

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

Answer 2

请试试这个，它正在工作

在你的组件中替换这个函数

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

如果你想切换 class 然后使用下面的函数，

 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>
   )
 }
}

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

how to reload page after handle state?

css

reactjs

react-bootstrap

responsive