如果文档也具有活动的eventListener，则链接组件或具有事件侦听器的任何其他元素不会触发click事件

Question

将'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);

上有代码。

Answer 1

解决了。这里应该是https://codesandbox.io/s/24z2v670wr而不是click的详细信息。 mousedown