javascript - 如何在单击时关闭和打开侧边栏

Question

每当我使用它时，即使我没有单击按钮，侧边栏也始终打开。换句话说，每当我刷新浏览器时，侧边栏就已经打开了。我希望它关闭，只有当我单击按钮时侧栏才会打开。

但我希望它根据命令打开和关闭。我尝试使用支持的 Prop ，但仍然没有运气:(。

顺便说一句，我正在使用这个 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;

Answer 1

首先，如果您希望它以关闭状态启动，则将值初始化为 false ..

    this.state = {
        sidebarOpen: false
    };

其次，如果你想让它打开和关闭，正常设置onClick -> onClick={this.onSetSidebarOpen} :

onSetSidebarOpen() {
    this.setState((prevState) => ({ sidebarOpen: !prevState.sidebarOpen }));
}

一般来说 - 当然它保持打开状态，默认情况下将值设置为 true，并且它永远保持 true。