如何关闭并打开我的侧边栏
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何关闭并打开我的侧边栏相关的知识,希望对你有一定的参考价值。
每当我使用它时,即使我没有点击按钮这样做,侧栏也始终打开。换句话说,每当我刷新浏览器时,侧栏都已打开。我希望它关闭,只有当我点击按钮时,侧栏才会打开。
但是我想要它打开和关闭命令。我试着玩支持的道具,但仍然没有运气:(。
我正在使用这个btw https://github.com/balloob/react-sidebar#installation
这是我的App.js
文件:
import React from "react";
import Sidebar from "react-sidebar";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
sidebarOpen: true
};
this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
}
onSetSidebarOpen(open) {
this.setState({ sidebarOpen: open });
}
render() {
return (
<Sidebar
sidebar={<div><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b><b>Sidebar content</b></div>}
open={this.state.sidebarOpen}
onSetOpen={this.onSetSidebarOpen}
styles={{ sidebar: { background: "white" } }}
>
<button onClick={() => this.onSetSidebarOpen(true)}>
Open sidebar
</button>
</Sidebar>
);
}
}
export default App;
答案
首先,如果您希望它以关闭方式启动,则将该值初始化为false。
this.state = {
sidebarOpen: false
};
其次,如果你想要它打开和关闭,通常设置onClick - > onClick={this.onSetSidebarOpen}
:
onSetSidebarOpen() {
this.setState((prevState) => ({ sidebarOpen: !prevState.sidebarOpen }));
}
一般情况下 - 当然它保持打开状态,默认情况下将值设置为true,并且它永远保持为真。
以上是关于如何关闭并打开我的侧边栏的主要内容,如果未能解决你的问题,请参考以下文章
我的 Internet 浏览器每次都会自动打开和关闭 HTML 侧边栏。我怎样才能阻止它,发生了啥?