当ipad方向从横向更改为纵向，反之亦然时，如何使用javascript和react将变量设置为false？

当使用react和javascript将iPad方向从横向更改为纵向，从纵向更改为横向时，我想将一个变量设置为false

我有两个状态变量isPopupOpen，isClicked最初设置为false。单击按钮时，这些设置为true。当用户单击弹出窗口之外的任何位置时，这些状态ispopupen和isClicked设置为false

下面是我的代码，它运行良好

function Parent({setIsPopupOpen, isPopupOpen}: Props) {
    const {isClicked, setIsClicked} = React.useState(false);

    const handleButtonClick = () => {
        setIsPopupOpen(!isPopupOpen);
        setIsClicked(!isClicked);
    }

    return () {
        <button onClick={handleButtonClick}>click me </button>
        <Popup>
            <Overlay onClick={() => {
                setIsPopupOpen(false);
                setIsClicked(false);
            }/>
        </Popup>
    }

};

但这仍然不会显示弹出窗口。

您可以收听。与React的域之外发生的事件的所有事件处理程序一样，您可以在

useffect

hook回调中无依赖地将其挂起一次，并在收到卸载回调时将其断开：

useEffect(
    () => {
        // Component is being mounted, add listener
        function onOrientationChange(event) {
            // Or if you just want to set the flag false:
            setIsPopupOpen(false);
        }
        window.addEventListener("orientationchange", onOrientationChange);
        return () => {
            // Component is being unmounted, remove listener
            window.removeEventListener("orientationchange", onOrientationChange);
        };
    },
    [] // <== No deps = only on mount
);

---

---

请注意，

window.orientation

属性由MDN描述为“不再推荐”，事件和属性都由MDN描述。不过，在或除非Sensors API出现之前，我无法想象移动浏览器会放弃对它们的支持。

谢谢，但这表示要将setispopupen添加到依赖项数组error React Hook React.useffect缺少一个依赖项：“setispopupen”。包括它或删除依赖项数组。如果“setIsPopupOpen”更改太频繁，请查找定义它的父组件，并将该定义包装在useCallback react hooks/Extreative中-deps@stack_overflow-几乎在发布答案后，我意识到你可能会遇到这种情况，并添加了上面的最后两段-你看到了吗？（如果没有，请点击刷新）我已根据您的回答将我的问题编辑为我尝试过的问题。thanks@stack_overflow-这并不能回答我的问题，你是否看到了这些段落。我还添加了一个处理可能不稳定的

setIsPopupOpen

的示例。我们无法帮助您调试看不到的代码，我只是根据您的分析工作，您需要在方向更改时设置标志

false

。请使用完整的、可运行的、使用堆栈片段演示问题的方法更新您的问题（使用

[]

工具栏按钮）。堆栈代码段支持React，包括JSX。很抱歉，我无法刷新页面，因此错过了它。使用你的答案，似乎角度没有定义。至少它在我这边犯了错误。

useEffect(
    () => {
        // Component is being mounted, add listener
        function onOrientationChange(event) {
            // Or if you just want to set the flag false:
            setIsPopupOpen(false);
        }
        window.addEventListener("orientationchange", onOrientationChange);
        return () => {
            // Component is being unmounted, remove listener
            window.removeEventListener("orientationchange", onOrientationChange);
        };
    },
    [] // <== No deps = only on mount
);

function Parent({setIsPopupOpen, isPopupOpen}: Props) {
    const {isClicked, setIsClicked} = React.useState(false);
    const [angle, setAngle] = React.useState(window.orientation);

    const handleButtonClick = () => {
        setIsPopupOpen(!isPopupOpen);
        setIsClicked(!isClicked);
    };

    React.useEffect(
        () => {
            // Component is being mounted, add listener
            function onOrientationChange(event) {
                const newAngle = window.orientation;
                if (newAngle !== angle) {
                    setAngle(newAngle);
                    setIsPopupOpen(false);
                }
            }
            window.addEventListener("orientationchange", onOrientationChange);
            return () => {
                // Component is being unmounted, remove listener
                window.removeEventListener("orientationchange", onOrientationChange);
            };
        },
        [setIsPopupOpen, angle]
    );

    return () {
        <button onClick={handleButtonClick}>click me </button>
        <Popup>
            <Overlay onClick={() => {
                setIsPopupOpen(false);
                setIsClicked(false);
            }/>
        </Popup>
    }

};