React Bootstrap — это чистая реализация популярного CSS-фреймворка Bootstrap на React. Библиотека response-bootstrap не использует jQuery под капотом, поскольку прямое управление DOM считается антипаттерном в экосистеме React. Следовательно, методы jQuery для запуска или закрытия модального окна работать не будут. Поскольку React Bootstrap Modal является компонентом React, у вас есть возможность управлять поведением компонента с помощью состояния или хуков.
В этом руководстве вы узнаете, как программно запустить React Bootstrap Modal, используя состояние.
Настройка модального компонента
Первый шаг — импортировать Modalкомпонент из react-bootstrap библиотеки. Наряду с этим импортируйте Button компонент, который будет запускать модальное окно при щелчке
|
1 |
import { Modal, Button } from "react-bootstrap"; |
После того, как вы импортировали компонент, напишите статическую разметку для модального окна.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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; |
Добавляем состояние и методы
Затем определяем состояние и методы закрытия и открытия модального окна.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class App extends Component { state = { isOpen: false }; openModal = () => this.setState({ isOpen: true }); closeModal = () => this.setState({ isOpen: false }); render() { //... } } |
Добавьте кнопку внутри render блока для запуска модального окна .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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значение состояния в show
|
1 |
<Modal show={this.state.isOpen}>{/* ... */}</Modal> |
Если вы проверите результат на этом этапе, вы заметите, что модальное окно открывается нормально, но нет возможности его закрыть. Итак, установите isOpen состояние false, когда пользователь нажимает кнопку « Закрыть» внутри модального окна. Также есть onHide свойство
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Теперь вы можете закрыть модальное окно. Довольно просто, правда?
Заключительный компонент
Взгляните на последний компонент ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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 переменную состояния в show в вызов
|
1 2 3 4 |
const [showModal, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); |
Ознакомьтесь с полным кодом ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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 используют Virtual DOM для изменения фактического DOM в браузере. jQueryВозможно использование для изменения поведения вашего компонента. Тем не менее, это приведет к неожиданным результатам и затруднит отладку. React Bootstrap реализует каждый компонент в чистом React, поэтому вам не нужно беспокоиться о зависимости Bootstrap от jQuery.
оригинал статьи на английском
https://www.pluralsight.com/guides/how-to-trigger-modal-for-react-bootstrap
