Why onKeyPress doesn't work for me in react?

Question

I want to play the audio using ''onkeypress'' event:

import React, { useRef } from "react";

export default ({ source }) => {
  const audRef = useRef(null);
  const onPlayHandler = () => {
    audRef.current.play();
    console.log("Key pressed.");
  };
  return (
    <div tabIndex="1" className="drum-pad" onKeyPress={onPlayHandler}>
      <audio ref={audRef} className="clip" controls>
        <source src={source} type="audio/mpeg" />
        <source src={source} type="audio/ogg" />
      </audio>
      W
    </div>
  );
};

But it doesn't work for me.
Note: It works only after clicking the tab button but I want to play on any keypress and without using inside input tag. full code is here on codesandbox.

Answer 1

You can attach event listener to div you want to capture. But your code does not look like that requirement. Better way is to add event listener on dom mounted. You can do something like this:

import React, { useRef } from "react";

export default ({ source }) => {
  const audRef = useRef(null);

  React.useEffect(() => {
    window.addEventListener("keydown", onPlayHandler);
    return () => {
      window.removeEventListener("keydown", onPlayHandler);
    };
  },[]);
  const onPlayHandler = () => {
    console.log("Key pressed.");
    audRef.current.play();
  };
  return (
    <div tabIndex="1" className="drum-pad">
      <audio ref={audRef} className="clip" controls>
        <source src={source} type="audio/mpeg" />
        <source src={source} type="audio/ogg" />
        <source src={source} type="audio/wav" />
      </audio>
      W
    </div>
  );
};

Here is demo: https://codesandbox.io/s/purple-tdd-fe3e1?file=/src/DrumPad.js:0-672