按钮切换显示抽屉模式弹出反应js

Question

我已经通过https://github.com/hanford/react-drag-drawer添加了拖动抽屉模态，我正在尝试设置此按钮以便切换抽屉显示，这是通过在单击时更改布尔状态来完成的。

你可以看到抽屉，如果你改变<Drawer open={open}到<Drawer open={true}，我希望它通过使用按钮onclick显示。

我尝试了两种不同的切换功能，第二种是在评论中，这是一个代码框片段

https://codesandbox.io/embed/znmpllxk0m?fontsize=14

Answer 1

import Drawer from "react-drag-drawer";
import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  toggle = () => {
    let { toggle } = this.state;

    this.setState({ open: !this.state.open });
  };

  /* toggle = () => {
    this.setState(prevState => {
      return {
        open: !prevState.open
      };
    });
  };
*/
  render() {
    const { open } = this.state;

    return (
      <div>
        <button onClick={this.toggle}>s</button>
        <Drawer
          open={this.state.open}
          onRequestClose={this.toggle}
          onDrag={() => {}}
          onOpen={() => {}}
          allowClose={true}
          modalElementClass="modal"
          containerElementClass="div"
          parentElement={document.body} // element to be appended to
          direction="bottom"
        >
          <div>Hey Im inside a drawer!</div>
        </Drawer>
      </div>
    );
  }
}

export default App;