如何使用 React 和 React Bootstrap

介绍

React Bootstrap是一个专为 React 构建的开源 UI 库，可帮助您将原生 Bootstrap 组件用作纯 React 组件，例如模态框、弹出框、按钮等。它使用简单，可轻松与现有 React 应用集成以自定义 UI，而不会影响功能。

本指南探讨如何在您的应用程序中使用 React 与 React Bootstrap。

设置 React Bootstrap 应用程序

创建一个新的 React 项目。

      npx create-react-app react-and-react-bootstrap-app

安装 react-bootstrap 和 Bootstrap。

      npm install react-bootstrap bootstrap

创建一个 react-bootstrap Modal

使用 react-bootstrap 模式作为App.js中的登录表单弹出窗口。首先，从 React 导入useState钩子以在功能组件中使用状态变量。然后从 react-bootstrap 导入Modal和Button以及 Bootstrap 的压缩 CSS 以使用 Bootstrap 的样式类。

      import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
    

Modal使用show属性来控制其在页面上的打开状态。show 存储一个布尔值，指示弹出窗口是应该打开还是关闭。您可以使用挂接到其按钮的事件处理程序来切换显示。查看以下代码以呈现当您单击登录按钮时打开的react-bootstrap模式。

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

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

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Sign In
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Sign In Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
         {/*add a react form here*/} 
         </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Sign Up
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Sign In
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default App;
    

在模态框内创建一个简单的表单

使用包含两个输入字段的表单填充模式主体：一个用于输入电子邮件地址，另一个用于输入密码。创建一个状态变量以将电子邮件存储在组件的状态中。

      ...
    const [email,setEmail]=useState('');
...
    

您可以使用 Bootstrap 的行和列来管理内容的布局，并将表单字段封闭在form-group类中以获得整洁的视图。将onChange处理程序附加到电子邮件字段，该处理程序捕获字段中输入的值并将其设置为电子邮件状态变量。

      ...  
<Modal.body>
 <Form>
    
    <div className="form-group">

        <div className="row">
            <div className="col-3">
                <label for="email" style={{fontWeight:500}} >Email:</label>                            </div>
           <div className="col-9">
               <input name="email" type="text" placeholder="Enter Email..." 
                        onChange={(e)=>{setEmail(e.target.value)}}                   
                />
           </div>  
        </div>
              
  </div>
  
  <div className="form-group">
      <div className="row">
           <div className="col-3">
              <label for="password" style={{fontWeight:500}}>Password:</label>
           </div>
           <div className="col-9">
              <input name="password" type="password" placeholder="Enter Password..."/>
           </div>
      </div>       
  </div>
    
 </Form>
</Modal.body>
...
    

要验证状态是否已正确设置，请在用户点击登录按钮时将其记录在控制台上。您可以在模态框的handleClose()方法中执行此操作，该方法在模态框关闭时触发，如下所示。

添加 react-bootstrap 警报组件

警报是成功提交表单或出现错误时向用户提供反馈的一种很好的方式。在App.js顶部从 react-bootstrap导入Alert组件。

      import {Alert} from 'react-bootstrap';
    

创建一个单独的功能组件来呈现警报。它返回一个包含标题、内容和关闭按钮的 react-bootstrap 警报。就像模态一样，它使用 show属性来指示警报在当前视图中是保持打开还是关闭。

      function MyAlert() {
  const [show, setShow] = useState(true);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>Welcome user :)</Alert.Heading>
        <p>
         you have successfully signed in! 
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me ya'll!
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}
    

在App.js中渲染MyAlert。

      ...
      <MyAlert/>
...
    

默认情况下，由于show的初始值，警报将保持在页面上打开状态。

结合所有功能

为了使MyAlert组件与App组件交互，请将电子邮件和另一个状态变量作为 props 传递给前者。此状态变量控制与模式相关的页面上的警报的显示状态。由于警报需要在用户单击登录之前隐藏或关闭，因此将其初始化为 false。

      ...
    const [showAlert,setShowAlert]=useState(false);
...
    

当用户点击模式中的handleClose()内部登录时将其设置为 true 。

      ...
    const handleClose = () =>{
    console.log(email);
     setShow(false);
     setShowAlert(true);
  }
...
    

有条件地渲染MyAlert组件并传入email和showAlert作为 props。

      ...
    {showAlert && < MyAlert email={email} showAlert={showAlert} />} 
...
    

在MyAlert组件内将显示初始化为showAlert，因此警报最初是关闭的，并且仅当用户单击登录按钮时才会触发。

      ...
    const [show, setShow] = useState(showAlert);
...
    

在警报正文中输出电子邮件。

      ...
    <p>
          {email} has successfully signed in!
    </p>
...
    

最后，你的App.js将如下所示：

      import React,{useState} from 'react';
import {Modal, Form} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import {Alert} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';



function MyAlert({email,showAlert}) {
  const [show, setShow] = useState(showAlert);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>Welcome user :)</Alert.Heading>
        <p>
          {email} has successfully signed in!
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Exit
          </Button>
        </div>
      </Alert>

      
    </>
  );
}

function App() {
  const [show, setShow] = useState(false);
  const [email,setEmail]=useState('');
  const [showAlert,setShowAlert]=useState(false);
  const handleClose = () =>{
    console.log(email);
     setShow(false);
     setShowAlert(true);
  }
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Sign In
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Sign In Form</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <div className="form-group">

              <div className="row">
                <div className="col-3">
                  <label for="email" style={{fontWeight:500}} >Email:</label>
                </div>
              

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

_查看原文