我有一個drawer用于我的移動導航的，當我點擊抽屜圖示時，它可以正常打開和關閉。但我正在嘗試實作點擊/單擊以關閉導航欄。因此，當用戶單擊或點擊導航欄時，它應該關閉。但是當抽屜關閉時我收到錯誤，因為ref頁面中缺少。所以我想通過運行檢查抽屜是否打開if (drawerIsOpen) { do...} else { dont...}奇怪的是我沒有從我的道具接收到更新的狀態。抽屜按應有的方式關閉和打開，但當我console.log(drawerIsOpen)它永遠不會給出正確的狀態。下面的代碼應該解釋我所得到的一些內容。
const Drawer = ({ drawerIsOpen, handleDrawer, drawerButtonRef }) => {
const drawerRef = useRef(null);
function handleClickOutside(event) {
if (!drawerIsOpen) {
// always returns since state is always telling me the drawer is closed
return;
}
if (drawerRef.current.contains(event.target)) {
console.log('inside');
} else {
console.log('outside');
console.log(handleDrawer);
handleDrawer();
}
}
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
};
}, []);
我的狀態是通過道具發送的。我的狀態從這個組件開始：
const drawerButtonRef = useRef(null);
const [drawerIsOpen, setDrawerIsOpen] = useState(false);
const handleDrawer = () => {
setDrawerIsOpen((prevState) => !prevState);
};
return (
<>
<Drawer
drawerIsOpen={drawerIsOpen}
handleDrawer={handleDrawer}
drawerButtonRef={drawerButtonRef}
/>
</>
)
uj5u.com熱心網友回復：
嘗試drawerIsOpen作為依賴項傳遞。您的 useEffect 邏輯僅被呼叫一次。
試試下面的：
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
};
}, [drawerIsOpen]);
drawerRef 還需要添加到您想要此行為的元素中，否則在您的邏輯中毫無意義。
Drawer 也沒有 JSX 元素.....也許你忘了在帖子中分享？
你也可以簡化這個
const handleDrawer = () => {
setDrawerIsOpen((prevState) => !prevState);
};
對此
const handleDrawer = () => {
setDrawerIsOpen(!drawerIsOpen);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463072.html
標籤：javascript 反应 状态 jsx