Реагировать на события onClick и keyDown cla sh при использовании хуков - PullRequest
Новая
       15

Реагировать на события onClick и keyDown cla sh при использовании хуков

0 голосов
/ 28 апреля 2020

У меня очень просто Modal. На родительском компоненте у меня есть пользовательский хук, который может переключать видимость модальной. Я также добавил общее событие keydown, чтобы я мог переключать модальное с помощью любой клавиши. Я передаю реквизиты isVisible и onKeyDown модалу и useCallback, чтобы обернуть onKeydown, и использую это в handleUserKeyPress event

Это работает, если я просто нажму 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];
}
...