Несколько модалов с реактивными крючками - PullRequest
1 голос
/ 25 января 2020

Я создаю некоторые модалы для удовольствия, но я не могу заставить их работать для нескольких модалов.

useModal hook

import { useState } from 'react';

const useModal = () => {

    const [isShowing, setIsShowing] = useState(false);

    const toggle = () => {
        setIsShowing(!isShowing);
    }

    return {
        isShowing,
        toggle,
    }
};

export default useModal;

Modal компонент

import React, { useEffect } from 'react';

const Modal = (props) => {

    const { toggle, isShowing, children } = props;

    useEffect(() => {

        const handleEsc = (event) => {
            if (event.key === 'Escape') {
                toggle()
            }
        };

        if (isShowing) {    
            window.addEventListener('keydown', handleEsc);
        }

        return () => window.removeEventListener('keydown', handleEsc);

    }, [isShowing, toggle]);

    if (!isShowing) {
        return null;
    }

    return (
        <div className="modal">
            <button onClick={ toggle } >close</button>
            { children }
        </div>
    )
}

export default Modal

в моем Main компонент

Если я это сделаю, то единственный модал на странице будет работать нормально

const { isShowing, toggle } = useModal();
...
<Modal isShowing={ isShowing } toggle={ toggle }>first modal</Modal>

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

const { isShowingModal1, toggleModal1 } = useModal();
const { isShowingModal2, toggleModal2 } = useModal();
...
<Modal isShowing={ isShowingModal1 } toggle={ toggleModal1 }>first modal</Modal>
<Modal isShowing={ isShowingModal2 } toggle={ toggleModal2 }>second modal</Modal>

что я делаю не так? спасибо

если вы хотите проверить это, пожалуйста go до https://codesandbox.io/s/hopeful-cannon-guptw?fontsize=14&hidenavigation=1&theme=dark

Ответы [ 2 ]

4 голосов
/ 25 января 2020

Попробуйте:

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  const toggle = () => {
    setIsShowing(!isShowing);
  };

  return [isShowing, toggle];
};

, затем:

export default function App() {
  const [isShowing, toggle] = useModal();
  const [isShowingModal1, toggleModal1] = useModal();
  const [isShowingModal2, toggleModal2] = useModal();
0 голосов
/ 25 января 2020

, если у вас есть несколько модальных значений, динамически внедрите <div> в тело страницы и отобразите для него модальное. для создания div используйте

    var divTag = document.createElement("div");
    divTag.setAttribute('id', 'modal');
    document.getElementsByTagName('body')[0].appendChild(divTag);
    document.getElementById('modal').innerHTML = modalHtML;

Это должно работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...