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

Question

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

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

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

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;

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

Button toggle to show drawer modal pop up react js

javascript

web-applications

jsx

drawer

reactjs