React Bootstrap 模态框

介绍

在前端开发中，开发人员在构建用户界面 (UI) 时必须考虑用户体验 (UX)。模态窗口是窗口组件，允许应用在主窗口上方的叠加窗口中显示用户通知、对话框或自定义内容。它们是在向用户传达通知和对话框方面的理想选择。这通过实现更简洁、更直观的 UI 丰富了用户体验。

假设你是一名 React 开发人员，正在为你的初创公司开发一个令人兴奋的项目：一款基于 Web 的金融科技产品。作为开发人员，你主要需要构建一个简单直观的 UI，同时还要具有流畅的用户体验。网站上的某个页面正在执行一个敏感操作，即资金转账。用户必须非常确定他们想要这样做。为了征求用户的确认，你决定开发一个通知和对话组件，该组件将通知用户他们即将执行敏感操作并询问他们是否希望取消或继续。该组件将是一个模态框。

在本指南中，您将学习如何使用 React.js 开发符合此要求的引导模式。本指南假设您具有 React.js 的基本知识（至少是初学者级别）。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-bootstrap-modal

cd react-bootstrap-modal

npm start

在你的基本 React 应用程序中包含 react-bootstrap。

      npm install react-bootstrap bootstrap

删除新创建的app.js文件中的代码，并粘贴下面的示例代码。

      import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}


export default App;
    

在您的app.js文件中，也包含样式表。

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

您现在可以导入引导组件。例如：

      import { Modal } from 'react-bootstrap';
    

设置模态框

在下面的示例代码中，您将创建一个简单的表单，当用户提交时，将显示确认模式。表单和按钮都是 React Bootstrap 组件。复制并粘贴下面的示例代码。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Row, Button,Col, Form, Card} from "react-bootstrap";

class App extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Row className="justify-content-md-center">
                <Col lg={4}>

                    <Card style={{ width: '20rem' }}>
                        <Card.Body>
                            <Card.Text>
                                <Form>
                                    <Form.Group controlId="formBasic">
                                        <Form.Label>Transfer Funds</Form.Label>
                                        <Form.Control type="Name" placeholder="Enter Name" />
          
                                    </Form.Group>

                                    <Form.Group controlId="formBasicPassword">
                                        <Form.Label>Amount</Form.Label>
                                        <Form.Control type="number" placeholder="Amount" />
                                    </Form.Group>

                                    <Button variant="primary" type="submit">
                                        Submit
                                    </Button>
                                </Form>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        );
    }
}
export default App;
    

上面的代码演示了一个用于输入详细信息的简单表单。单击提交按钮后，将弹出确认模式，并要求用户确认交易。

设置模态框。在本例中，您将在单独的函数中呈现模态框。复制并粘贴以下代码。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Row, Button,Col, Form, Card} from "react-bootstrap";

class App extends Component{
    constructor(props) {
        super(props);
        this.state = ({
            show: false,
        })

        this.handleClose = this.handleClose.bind(this);
        this.handleShowModal = this.handleShowModal.bind(this);
    }

    handleShowModal(){
        this.setState({
            show: true
        })
    }

    handleClose(){
        this.setState({
            show:false
        })
    }

    renderModal() {

        return (
            <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">
                <Modal.Header closeButton>
                    <Modal.Title>Confirm Transaction</Modal.Title>
                </Modal.Header>
                <Modal.Body>You are about to transfer funds to John Doe. Do you wish to continue?</Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={this.handleClose}>
                        Proceed
                    </Button>
                    <Button variant="danger" onClick={this.handleClose}>
                        Cancel
                    </Button>
                </Modal.Footer>
            </Modal>
        )

    }

    render() {
        return (
            <Row className="justify-content-md-center">
                <Col lg={4}>
                    <Card style={{ width: '20rem' }}>
                        <Card.Body>
                            <Card.Text>
                                <Form>
                                    <Form.Group controlId="formBasicName">
                                        <Form.Label>Transfer Funds</Form.Label>
                                        <Form.Control type="name" placeholder="Enter Name" />
                                    </Form.Group>
                                    <Form.Group controlId="formBasicAmount">
                                        <Form.Label>Amount</Form.Label>
                                        <Form.Control type="number" placeholder="Amount" />
                                    </Form.Group>
                                    <Button variant="primary"
                                            onClick={this.handleShowModal}
                                    >
                                        Transfer
                                    </Button>
                                </Form>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>

                <Col>
                    {this.renderModal()}
                </Col>
            </Row>
        );
    }
}

export default App;
    

在上面的示例中，rendermodal()函数渲染了模态框。在构造函数中，您初始化了一个名为 show 的状态。页面加载时，此状态为 false。此状态将负责显示模态框。单击提交按钮后，handleShowModal ()函数会将您的状态设置为 true，并显示模态框。handleClose ()负责隐藏模态框并将您的 show 状态设置为 false。为了获得良好的实践效果，示例在单独的函数中渲染模态框。此外，为了确保用户不会忽略模态框或强制模态焦点，您可以添加background="static"。

结论

在本指南中，您使用 React.js 开发了一个 bootstrap 模式。这些知识对于前端开发人员和 React 开发人员职位至关重要。

为了进一步完善本指南，下一个挑战是使用自定义钩子和上下文 API 开发模式。您可以在此处找到入门资源。

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

_查看原文