如何以编程方式打开或关闭 react-bootstrap 模式？

模态框是放置在当前页面上的弹出窗口或对话框，用于显示需要阅读的消息。使用 react-bootstrap UI 库，我们将使用功能组件中的钩子对模式进行编程。

我们可以使用useState()钩子来打开/关闭 react-bootstrap modal 。 useState函数是一个内置的钩子，它允许我们向功能组件添加状态，而无需切换到类组件。
句法：

const [state, setState] = useState(initialState);

第一个值 state 表示当前状态，而第二个值用于更新函数的状态。 useState函数将参数作为默认值。在继续之前，有一个先决条件。

先决条件：

• 安装反应引导：

npm install react-bootstrap bootstrap

• 导入 bootstrap.min.css：

import 'bootstrap/dist/css/bootstrap.min.css';

• 导入内置钩子useState：

import React, {useState} from "react";

• 导入单个组件，例如 Button 和 Modal

import Button from 'react-bootstrap/Button';

应用程序.js：

javascript

import React, {useState} from "react";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
  
function Example() {
  const [show, setShow] = useState(false);
  
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  
  return (
    <>
      
        Launch static backdrop modal
      
  
      
        
          Modal title
        
        
          I will not close if you click outside me.
          Don't even try to press
          escape key.
        
        
          
            Close
          
            
        
      
    
  );
}
  
export default Example;

index.js：

javascript

import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./App";
  
const rootElement = document.getElementById("root");
ReactDOM.render(
  
    
  ,
  rootElement
);

输出：