事件处理程序在反应中无法正常工作

Question

I have this code in HomePage component and when pressing arrow down/up key, nothing happens. And I just realized that eventhandler works properly when pressing arrow keys with ctrl. I searched everywhere, but found nothing. Can anyone help, please? My browser is Chrome v.96.+ React version 17.0.2, node v.16.13.1

 const HomePage = () => {
  const keyPressHandler = (e) => {
    if (e.repeat) return;
    if (e.key === "ArrowDown") {
      window.scrollBy(0, window.innerHeight);
    }
    if (e.key === "ArrowUp") {
      window.scrollBy(0, -window.innerHeight);
    }
  };

  return (
    <Container tabIndex="0" onKeyDown={keyPressHandler}>
      <div
        style={{ width: "100%", height: "100vh", backgroundColor: "green" }}
      />
      <div
        style={{ width: "100%", height: "100vh", backgroundColor: "gray" }}
      />
      <div style={{ width: "100%", height: "100vh", backgroundColor: "red" }} />
    </Container>
  );
};

Answer 1

I fixed this creating new project and pasting this code there. I had some issues while installing react-icons dependencies and I stopped it manually. I think I get an error there