admin 管理员组文章数量: 1184232
On button click I want the Modal to appear.
The Modal ponent adds a eventListener so it closes when you click outside the modal. In React 18 the click event triggers because the button click that happend before Modal was rendered? If I change to react 17 this does not happen.
Find a CodeSandbox here. Notice,
when you click the button the show state sets to true.
Then the Modal ponent renders and calls the close function directly.
App.js:
import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";
export default function App() {
const [show, setShow] = useState(false);
const close = () => {
setShow(false);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button
onClick={(e) => {
setShow(true);
}}
>
Click
</button>
{show && <Modal close={close} />}
</div>
);
}
Modal.js
import "./styles.css";
import { useRef, useEffect } from "react";
export default function Modal({ close }) {
const ref = useRef(null);
useEffect(() => {
const handleOutsideClick = (e) => {
if (!ref?.current?.contains(e.target)) {
console.log("This one gets called because of the button click", e);
close();
}
};
document.addEventListener("click", handleOutsideClick, false);
return () => {
document.removeEventListener("click", handleOutsideClick, false);
};
}, [close]);
return (
<div ref={ref} className="Modal">
<h1>I'm a Modal!</h1>
</div>
);
}
On button click I want the Modal to appear.
The Modal ponent adds a eventListener so it closes when you click outside the modal. In React 18 the click event triggers because the button click that happend before Modal was rendered? If I change to react 17 this does not happen.
Find a CodeSandbox here. Notice,
when you click the button the show state sets to true.
Then the Modal ponent renders and calls the close function directly.
App.js:
import { useState } from "react";
import Modal from "./Modal";
import "./styles.css";
export default function App() {
const [show, setShow] = useState(false);
const close = () => {
setShow(false);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button
onClick={(e) => {
setShow(true);
}}
>
Click
</button>
{show && <Modal close={close} />}
</div>
);
}
Modal.js
import "./styles.css";
import { useRef, useEffect } from "react";
export default function Modal({ close }) {
const ref = useRef(null);
useEffect(() => {
const handleOutsideClick = (e) => {
if (!ref?.current?.contains(e.target)) {
console.log("This one gets called because of the button click", e);
close();
}
};
document.addEventListener("click", handleOutsideClick, false);
return () => {
document.removeEventListener("click", handleOutsideClick, false);
};
}, [close]);
return (
<div ref={ref} className="Modal">
<h1>I'm a Modal!</h1>
</div>
);
}
- 1 Here is a reply from Dan Abramov: github./facebook/react/issues/24657#issuement-1150119055 – Lionel Commented Aug 17, 2022 at 11:15
4 Answers
Reset to default 8You can call event.stopPropagation to prevent multiple click handlers capturing the same click event.
onClick={(e) => {
e.stopPropagation();
setShow(true);
}}
I don't know why this would differ between React 17 and 18. React uses its own "synthetic events", and there might have been a change in how event propagation/bubbling happens between the two versions.
It might be connected to what's called "automatic batching" in React 18. https://github./reactwg/react-18/discussions/21
In your example, the Modal ponent uses native event handling with document.addEventlistener(). It seems that React 18 handles the click inside the app, which triggers a state change and a rerender, mounts the Modal ponent, runs the useEffect() hook, and creates the new event listener before the click event is propagated to the window node. In React 17, the event presumably finishes propagating before the re-render happens.
Dan Abramov gives some suggestions in this ment (https://github./facebook/react/issues/24657#issuement-1150119055).
Suggestion 1 is: In the useEffect, delay the addEventListener call with a setTimeout with 0 wait time. Example:
useEffect(() => {
const handleOutsideClick = (e) => {
if (!ref?.current?.contains(e.target)) {
console.log("This one gets called because of the button click", e);
close();
}
};
const timeoutId = setTimeout(() => {
document.addEventListener("click", handleOutsideClick, false);
}, 0);
return () => {
clearTimeout(timeoutId);
document.removeEventListener("click", handleOutsideClick, false);
};
});
Suggestion 2 is to capture the current event and ignore just that one in the modal's useEffect. Example provided by @YoussoufOumar in this answer and at https://github./microsoft/fluentui/pull/18323
A different solution to the problem involves new startTransition API: https://codesandbox.io/s/gracious-benz-0ey6ol?file=/src/App.js:340-388
onClick={(e) => {
startTransition(() => {
setShow(true);
})
}}
This new API (doc) definitely helps, but I'm not sure this is a legit solution, and docs are not quite clear on that. Would be nice if someone from React can ment -- is this an abuse?
You could change your if statement in handleOutsideClick as below. Yours is not working because the button for opening the Modal, since it's not inside the Modal, passes this
if(!ref?.current?.contains(e.target)) you have.
Here is a working fork of your CodeSandbox. I'm passing the button's ref to Modal. And here is what I changed:
const handleOutsideClick = (e) => {
if (!ref?.current?.contains(e.target) && !openButtonRef?.current?.contains(e.target)) {
console.log("This one gets called because of the button click", e);
close();
}
};
本文标签：
版权声明：本文标题：javascript - React, click outside event happens right after click to open, preventing the modal from showing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1740280215a2165910.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论