Reactstrap — Параметры модального закрытия

Reactstrap — это версия Bootstrap, созданная для React.

Это набор компонентов React со стилями Boostrap.

В этой статье мы рассмотрим, как добавлять модальные окна с помощью Reactstrap.

Модальные окна с пользовательским значком закрытия

Мы можем изменить значок закрытия кнопки с помощью реквизита charCode.

Например, мы можем написать:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
export default function App() {
  const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle} charCode="close">
          Modal title
        </ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Мы устанавливаем свойство charCode на 'close', чтобы оно отображалось как значение кнопки закрытия.

Очистить

Мы можем изменить параметры очистки нашего модального окна.

Если unmountOnClose options равен false , то данные, которые мы ввели в модальное окно, остаются доступными после того, как мы его закроем.

Это потому, что он не полностью размонтирован.

Например, мы можем написать:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  Form
} from "reactstrap";
export default function App() {
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);
  return (
    <div>
      <Form inline onSubmit={e => e.preventDefault()}>
        <Button color="danger" onClick={toggle}>
          open modal
        </Button>
      </Form>
      <Modal isOpen={modal} toggle={toggle} unmountOnClose={false}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          <Input type="textarea" placeholder="Write something" rows={5} />
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

чтобы создать модальное окно с текстовой областью внутри него.

Когда мы что-то вводим, это все равно будет доступно после того, как мы закроем и снова откроем модальное окно.

Фокус после закрытия

Мы можем сделать наш модальный фокус на кнопке, которая открыла его после его закрытия.

Для этого мы устанавливаем returnFocusAfterClose на true .

Например, мы можем написать:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  Label,
  Form,
  FormGroup
} from "reactstrap";
export default function App() {
  const [open, setOpen] = useState(false);
  const toggle = () => setOpen(!open);
  return (
    <div>
      <Button color="danger" onClick={toggle}>
        Open
      </Button>
      <Modal returnFocusAfterClose isOpen={open}>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor, eu aliquam nulla volutpat sed. Cras velit ex,
          aliquam quis lobortis vel, fermentum at leo. Donec hendrerit, ligula
          in ultricies suscipit, ante justo tempus erat, et cursus odio arcu ac
          lorem.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Close
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Как только мы закроем модальное окно, кнопка «Открыть» будет сфокусирована.

Это потому, что мы добавили реквизит returnFocusAfterClose.

Вывод

Мы можем вернуть фокус элементу, открывшему модальное окно.

Кроме того, можно изменить текст кнопки закрытия и параметры очистки.