Question

我有一个非常简单的Modal。在父组件上，我有一个自定义钩子，可以切换模态的可见性。我还添加了常规keydown事件，因此可以使用任意键切换模式。 Ia正在将isVisible和onKeyDown道具传递给模态，并将useCallback封装为onKeydown并在handleUserKeyPress事件中使用它

如果我只单击handle click按钮，它将起作用。只要我按任意键，它就可以工作。

问题： 但是，如果我将两者结合起来，则会出错。如果单击显示模态，则使用键切换可见性。模态隐藏并再次出现。

codesandbox.io： https://codesandbox.io/s/display-a-modal-window-es1xy

// app.js
import React, { useState } from "react";
import "./styles.css";
import { Modal } from "./Modal";

export default function App() {
  const [visible, setVisibility] = useModalVisibility(false);

  return (
    <div className="App">
      <button onClick={setVisibility}>Handle click</button>
      <Modal isVisible={visible} onKeydown={setVisibility} />
    </div>
  );
}

function useModalVisibility(initial) {
  const [visible, setVisible] = useState(initial);

  const handleVisibility = e => {
    setVisible(!visible);
  };

  return [visible, handleVisibility];
}

// Modal.js
import React, { useCallback, useEffect } from "react";
import "./styles.css";

export function Modal(props) {
  // Use object destructuring to set defaults for certain
  // attributes of the modal component.
  const { isVisible, onKeydown } = props;

  /**
   * REF: https://stackoverflow.com/questions/55565444/how-to-register-event-with-useeffect-hooks
   */
  const handleUserKeyPress = useCallback(() => {
    onKeydown();
  }, [onKeydown]);

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  if (isVisible) {
    return <div className="modal">MODAL</div>;
  }

  return null;
}

使用钩子时反应onClick和keyDown事件发生冲突

0 个答案: