如何触发 React Bootstrap 的模式

介绍

React Bootstrap 是流行的 Bootstrap CSS 框架的纯 React 实现。react-bootstrap 库在底层不使用 jQuery，因为直接操作 DOM 被视为 React 生态系统中的反模式。因此，触发或关闭模式的 jQuery 方法不起作用。由于 React Bootstrap Modal 是一个 React 组件，因此您可以灵活地使用状态或钩子来控制组件的行为。

在本指南中，您将学习如何使用状态以编程方式触发 React Bootstrap Modal。

设置模态组件

第一步是从react-bootstrap库导入Modal组件。同时导入按钮组件，该组件将在点击时触发模式。

      import { Modal, Button } from "react-bootstrap";
    

导入组件后，为模式编写静态标记。

      class App extends Component {
  render() {
    return (
      <Modal>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary">Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

export default App;
    

添加状态和方法

接下来，定义状态以及关闭和打开模式的方法。

      class App extends Component {
  state = {
    isOpen: false
  };

  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  render() {
    //...
  }
}
    

在渲染块中添加一个按钮来触发模式。

      class App extends Component {
  // ...
  render() {
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={this.openModal}>
          Launch demo modal
        </Button>
      </div>
      <Modal>{/* ... */}</Modal>
    </>;
  }
}
    

单击按钮时，isOpen状态将设置为 true。现在，要显示模态框，您需要做的就是将isOpen状态值传递给<Modal />组件的show属性。

      <Modal show={this.state.isOpen}>{/* ... */}</Modal>
    

如果您此时查看结果，您会注意到模态框打开得很好，但没有办法关闭它。因此，当用户点击模态框内的“关闭”按钮时，将isOpen状态设置为 false。 <Modal />组件还有一个onHide属性，当用户点击覆盖层或按下Esc按钮时，它会关闭模态框。

      <Modal show={this.state.isOpen} onHide={this.closeModal}>
  <Modal.Header closeButton>
    <Modal.Title>Modal heading</Modal.Title>
  </Modal.Header>
  <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={this.closeModal}>
      Close
    </Button>
  </Modal.Footer>
</Modal>
    

现在你应该也能关闭模态框了。很简单，对吧？

最终组件

看一下下面的最后一个组件。

      import React, { Component } from "react";
import { Modal, Button } from "react-bootstrap";

class App extends Component {
  state = {
    isOpen: false
  };

  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  render() {
    return (
      <>
        <div
          className="d-flex align-items-center justify-content-center"
          style={{ height: "100vh" }}
        >
          <Button variant="primary" onClick={this.openModal}>
            Launch demo modal
          </Button>
        </div>
        <Modal show={this.state.isOpen} onHide={this.closeModal}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.closeModal}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

export default App;
    

使用 useState 钩子

您还可以使用useState钩子在功能组件中触发模式。

状态和方法可以声明如下。其余部分与类组件相同，但不是this.state.isOpen，而是将showModal状态变量传递给<Modal />组件的show属性。

      const [showModal, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
    

查看下面的完整代码。

      import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";

function App() {
  const [showModal, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <div
        className="d-flex align-items-center justify-content-center"
        style={{ height: "100vh" }}
      >
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
      </div>
      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default App;
    

结论

您必须使用受控组件，这些组件使用内部状态来设置值并更改组件的行为。jQuery 等库会直接操作 DOM，而 React 组件则使用虚拟 DOM 来修改浏览器上的实际 DOM。使用jQuery更改组件的行为是可能的。不过，这会导致意外结果并使其难以调试。React Bootstrap 以纯 React 实现每个组件，因此您不必担心 Bootstrap 对jQuery的依赖。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文