Как использовать метод showModal() и close() у нативного элемента через реф?

Question

Элемент  предоставляет методы showModal() и close() для управления отображением. В React нужно получить доступ к DOM-элементу через useRef, затем вызвать эти методы в обработчиках событий. Это позволяет создавать модальные окна без сторонних библиотек.

YeaHub · Accepted Answer

Что такое элемент

Элемент

— это нативный HTML-элемент, предназначенный для создания модальных окон и диалогов. Он предоставляет встроенные методы showModal() для открытия окна в модальном режиме (с блокировкой фона) и close() для его закрытия. Это упрощает разработку, так как не требует дополнительных библиотек.

Использование в React через рефы

В React для доступа к DOM-элементу используется хук useRef. Создаётся реф, который привязывается к элементу

. Затем в обработчиках событий (например, onClick) вызываются методы showModal() и close() через текущее значение рефа.

import { useRef } from 'react';

function Modal() {
  const dialogRef = useRef(null);

  const openModal = () => {
    dialogRef.current?.showModal();
  };

  const closeModal = () => {
    dialogRef.current?.close();
  };

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      <dialog ref={dialogRef}>
        <p>Modal content</p>
        <button onClick={closeModal}>Close</button>
      </dialog>
    </>
  );
}

Особенности и применение

Метод showModal() открывает диалог поверх остального контента и блокирует взаимодействие с фоном. Для закрытия можно использовать close() или нажатие клавиши Escape. Элемент

Как использовать метод showModal() и close() у нативного элемента <dialog> через реф?

Короткий ответ

Длинный ответ

Что такое элемент

Использование в React через рефы

Особенности и применение

Как использовать метод showModal() и close() у нативного элемента <dialog> через реф?

Короткий ответ

Длинный ответ

Что такое элемент

Использование в React через рефы

Особенности и применение