使用 React Hooks 在 mouseenter 和 mouseleave 上隐藏和显示模式

Question

我尝试添加条件mouseenter，mouseleave但是模式不起作用，但是当我尝试创建模式时，button onClick={() => {openModal();}}模式将会显示。您能告诉我我的代码有什么问题以及哪一部分吗？

const openModal = event => {
    if (event) event.preventDefault();
    setShowModal(true);
  };

  const closeModal = event => {
    if (event) event.preventDefault();
    setShowModal(false);
  };

  function useHover() {
    const ref = useRef();
    const [hovered, setHovered] = useState(false);
    const enter = () => setHovered(true);
    const leave = () => setHovered(false);

    useEffect(() => {
      if (ref.current.addEventListener('mouseenter', enter)) {
        openModal();
      } else if (ref.current.addEventListener('mouseleave', leave)) {
        closeModal();
      }
      return () => {
        if (ref.current.addEventListener('mouseenter', enter)) {
          openModal();
        } else if (ref.current.addEventListener('mouseleave', leave)) {
          closeModal();
        }
      };
    }, [ref]);

    return [ref, hovered];
  }

  const [ref, hovered] = useHover();



<div className="hover-me" ref={ref}>hover me</div>

  {hovered && (
    <Modal active={showModal} closeModal={closeModal} className="dropzone-modal">
      <div>content here</div>
    </Modal>
  )}

Answer 1

基于Drew Reese 的答案，您可以将节点引用缓存在 useEffect 闭包本身内，这稍微简化了事情。您可以在此 stackoverflow 线程中阅读有关闭包的更多信息。

const useHover = () => {
  const ref = useRef();
  const [hovered, setHovered] = useState(false);
  const enter = () => setHovered(true);
  const leave = () => setHovered(false);

  useEffect(() => {
    const el = ref.current; // cache external ref value for cleanup use
    if (el) {
      el.addEventListener("mouseenter", enter);
      el.addEventListener("mouseleave", leave);

      return () => {
        el.removeEventLisener("mouseenter", enter);
        el.removeEventLisener("mouseleave", leave);
      };
    }
  }, []);

  return [ref, hovered];
};