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

【问题标题】：Button toggle to show drawer modal pop up react js按钮切换以显示抽屉模式弹出反应js
【发布时间】：2019-02-26 03:32:00
【问题描述】：

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

如果您将<Drawer open={open} 更改为<Drawer open={true}，您可以看到抽屉，我希望它通过单击按钮显示。

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

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

【问题讨论】：

标签： javascript reactjs web-applications jsx drawer

【解决方案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;

【讨论】：