Кнопка переключения, чтобы показать ящик модальное всплывающее окно реагировать 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;