Adding Key Press Event with React

JavaScript
1

Hello,

I am working on my Drum Machine project and I am coming across a issue trying to get keydown events to work.

A shortened version of the code appears as so:

$(document).ready(function () {
  let soundDirectory = {
    Q: {
      sound: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
      text: "The Roar of A T-Rex"
    }
  }
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        displayText: "Example Text"
      }
      this.handleKeyUp = this.handleKeyUp.bind(this);
      this.handleClickEvent = this.handleClickEvent.bind(this);
    }
    handleKeyUp(event) {
      console.log(event.charCode)
    }
    handleClickEvent(event) {
      let soundToPlay = new Audio(soundDirectory[event.target.id].sound)
      soundToPlay.play()
      this.setState({
        displayText: soundDirectory[event.target.id].text
      })
    }
    render() {
      return (
        <main
          id="drum-machine"
          className="flex-column"
          onKeyDown={this.handleKeyUp}
        >
          <h1>Drum machine</h1>
          <h2 id="display">{this.state.displayText}</h2>
          <div id="drum-machine-wrapper" className="flex-row">
            <div className="drum-pad flex-column" onClick={this.handleClickEvent} id="Q">
              Q
            </div>
       // removed other drum pads
          </div>
        </main>
      );
    }
  }

I put a onKeyDown event listener to the main. This makes it so when the user presses a button, it should fire.

The current click event works, but the keyDown event is unresponsive. I have seen other form posts, such as this one, which mention using similar logic but for input fields rather then putting it on a main.

Any ideas on why my keyDown event does not fire? Will I need to add it to every single drum pad or can I just apply it to the page itself (main) so it always activates?

1 Like
2

Hello,

add tabIndex="0" to the main element and the event listener should be triggerred.
Also you might want to access the event.key to figure out which key user clicked, you can find more about event for example here: KeyboardEvent key Property

1 Like
4

This works, but then if the user clicks off the drum machine it stops working. How would I fix this so everything on the page is listening for this key press?

5

This might work but you do not want to do this because it is an accessibility failure. Only functional elements (elements that perform an action when you click on them) should have tabindex set to 0, and they already do by default (unless you are building a custom widget) so adding tabindex=0 is almost never needed.

The solution is to add the keydown event listener to the document.

1 Like
6

How would I add the event listener to the document with React? Its not currently in the scope of the app.

7

React: Add Event Listeners

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.