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;

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

1 个答案: