При подключении слушателя события click к DOM, такие элементы, как Link или некоторые кнопки со слушателем onClick, которые являются частью ref, не реагируют на click event.Если никаких действий не предпринимается - это работает нормально, но когда я звоню, например, toggleMenu(), это просто останавливается на этом.Что-то, что вы обычно видите после применения e.stopPropagation() или e.preventDefault() ...
Каким-то странным даже не знаю, как объяснить, лучше просто взгляните на код.
import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Link } from "react-router-dom";
function App() {
const menuRef = useRef();
const onDocumentClick = ({ target }) => {
if (menuRef.current.contains(target)) {
// event stops here if any action is taken
// even an alert
// comment this line to see the difference
alert('This is not button\'s alert');
}
};
useEffect(() => {
document.addEventListener("mousedown", onDocumentClick);
return () => {
document.removeEventListener("mousedown", onDocumentClick);
};
}, []);
return (
<BrowserRouter>
<div ref={menuRef} className="App">
<Link to="/test">Not working</Link>
<p>Button should show an alert saying 'clicked'</p>
<button onClick={() => alert("clicked")}>Doesn't work</button>
</div>
<br/>
<br/>
<br/>
<p>Outside of 'ref'</p>
<Link to="/test">Works</Link>
<p>........................</p>
<button onClick={() => alert("clicked")}>Works</button>
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
У меня есть код на https://codesandbox.io/s/24z2v670wr, если вы хотите проверить его.