В реагирующей моде кнопка закрытия не работает

Question

Я использую мод начальной загрузки в проекте ReactionJS.Вот ссылка на пакет, который я установил в своем проекте: https://www.npmjs.com/package/react-responsive-modal

Когда я нажимаю на кнопку открытия модального режима, она работает, но когда я нажимаю на кнопку закрытия, кнопка закрытия не работает.,Я использую крючки в моем проекте.Ниже я упомянул свой код:

import React, { useState } from 'react'
import Modal from 'react-responsive-modal'

const Login = () => {
    const [open, openModal] = useState(false)

    const onOpenModal = () => {
        openModal({open: true})
    };
    const onCloseModal = () => {
        openModal({open: false})
    };

    return(
        <div>
            <h1>Login Form</h1>
            <button onClick={onOpenModal}>Open modal</button>
            <Modal open={open} onClose={onCloseModal} center>
            <h2>Simple centered modal</h2>
            </Modal>            
        </div>
    )
}

export default Login;

Answer 1

Проблема заключается в том, что вы устанавливаете объект в состоянии,

openModal({open: true})

Это сохранит объект в состоянии.

setState требует прямого значения, которое необходимо изменить, вашеsetState должно быть таким,

const onOpenModal = () => {
    openModal(!open)  //This will negate the previous state
};

const onCloseModal = () => {
    openModal(!open) //This will negate the previous state
};

Демо

---

Вы можете упростить свой код и просто использовать 1 дескриптор изменения для вашего модального

const Login = () => {
    const [open, openModal] = useState(false)

    const toggleModal = () => {
        openModal(!open)
    };
    return(
        <div>
            <h1>Login Form</h1>
            <button onClick={toggleModal}>Open modal</button>
            <Modal open={open} onClose={toggleModal} center>
            <h2>Simple centered modal</h2>
            </Modal>            
        </div>
    )
}

Демо

Answer 2

Ваше наименование ловушки модели вводит в заблуждение, и вы неправильно используете часть setState крючка, вероятно, смешивая его с соглашением this.setState для кода, отличного от Hook React.

import React, { useState } from 'react'
import Modal from 'react-responsive-modal'

const Login = () => {
    const [modalOpen, setModalOpen] = useState(false)

    const onOpenModal = () => {
        setModalOpen(true)
    };
    const onCloseModal = () => {
        setModalOpen(false)
    };

    return(
        <div>
            <h1>Login Form</h1>
            <button onClick={onOpenModal}>Open modal</button>
            <Modal open={modalOpen} onClose={onCloseModal} center>
            <h2>Simple centered modal</h2>
            </Modal>            
        </div>
    )
}

export default Login;