javascript - removeEventListener 不适用于 Modal 关闭

Question

我正在构建一个使用 Semantic UI React 的 React 应用程序。我有一些缩略图打开模态组件以在模态中显示全尺寸图像。我还有用于浏览下一个和上一个的按钮。随着按钮的点击，我想使用箭头键来导航。当模态打开时，我可以向窗口添加事件监听器。但是当我关闭模态并打开另一个时，一个重复的事件监听器添加到窗口中。这意味着我需要在模式关闭时删除事件监听器。但是，语义 UI React Modal 组件的 onClose 和 onUnmount Prop 不会应用删除。我怎样才能让它申请？除了 removeEventListener 之外的任何东西都可以在 onClose 或 onUnmount 中运行，但 removeEventListener 不会运行。
这是整个附件组件:

import React, { Fragment, useState } from 'react'
import { Button, Card, Modal, Image } from 'semantic-ui-react'
import parse from 'html-react-parser'
import { IMedia } from '../../app/models/media'

interface IProps {
    attachedMedia: IMedia, 
    gallery: IMedia[], 
    featured: boolean
}

const Attachment: React.FC<IProps> = ({ attachedMedia, gallery, featured }) => {
    const [open, setOpen] = useState(false)
    const [index, setIndex] = useState(gallery.indexOf(attachedMedia))
    const [disabledNext, setDisabledNext] = useState(false)
    const [disabledPrev, setDisabledPrev] = useState(false)

    const handlePrev = () => {
        if (index > 0) {
            setIndex(index - 1)
            setDisabledNext(false)
            if (index === 1) setDisabledPrev(true)
        } 
    }

    const handleNext = () => {
        if (index < gallery.length - 1) {
            setIndex(index + 1)
            setDisabledPrev(false)
            if (index === gallery.length - 2) setDisabledNext(true)
        }
    }

    const handleClose = () => {
        setIndex(gallery.indexOf(attachedMedia))
        setDisabledPrev(false)
        setDisabledNext(false)
        setOpen(false)
        window.removeEventListener('keydown', handleKeyPress)
    }

    const handleMount = () => {
        if (index === 0) setDisabledPrev(true)
        if (index === gallery.length - 1) setDisabledNext(true)
        window.addEventListener('keydown', handleKeyPress)
    }

    const handleKeyPress = (e: KeyboardEvent) => {
        console.log(e)
    }

    return (
        <Fragment>
            {featured ? 
                (attachedMedia.media_details.sizes.medium?.source_url !== undefined) ? 
                    <Image src={attachedMedia.media_details.sizes.medium.source_url} ui={false} onClick={() => {setOpen(true)}} />
                :
                    <Image src={attachedMedia.media_details.sizes.full.source_url} ui={false} onClick={() => {setOpen(true)}} />
            :
                <Card className="attachment"><Image src={attachedMedia.media_details.sizes.thumbnail.source_url} onClick={() => setOpen(true)} /></Card>
            }
            
            <Modal open={open} centered={false} onClose={handleClose} onMount={handleMount}>
                <Modal.Header>
                    {parse(gallery[index].title.rendered)}
                </Modal.Header>
                <Modal.Content image scrolling>
                    <Image src={gallery[index].media_details.sizes.full.source_url} wrapped fluid />
                    <Modal.Description>
                        {parse(gallery[index].description.rendered)}
                    </Modal.Description>
                </Modal.Content>
                <Modal.Actions>
                    <Button disabled={disabledPrev} onClick={handlePrev}>Previous image</Button>
                    <Button disabled={disabledNext} onClick={handleNext}>Next image</Button>
                </Modal.Actions>
            </Modal>
        </Fragment>
    )
}

export default Attachment

在这里，handleClose 函数包含removeEventListener，但是尽管handleClose 中的其余代码可以有效运行，但删除并未应用于窗口。
我能够运行 removeEventListener 的唯一尝试是在 handleKeyPress 函数中使用它。但这不是我想要的，它会在按下一键后删除监听器。只要模态打开，我就可以按键。
模式关闭时如何使 removeEventListener 生效？

Answer 1

您可以使用 useEffect钩。
因此，您需要从 handleOpen 中删除 add/remove eventListener和 handleClose常数。
示例:

React.useEffect(() => {
    if (open) window.addEventListener('keydown', handleKeyPress);
    else window.removeEventListener('keydown', handleKeyPress);
  }, [open]
);

当您打开模态时，您设置 open状态为真。
此 effect带触发器，更改 open状态。
因此，当它打开时，您正在添加监听器，而当它关闭时，您正在删除监听器。
简单的!