Search code examples
javascriptreactjsref

How do I make ReactJS button look like pressed on keyPress?

I created a Drum Machine with ReactJS, and I can't find a way to make the buttons look like clicked when I press the corresponding key. I found the following question on the site, but I can't make refs work with my code and I don't know why:

Apply button 'Active' styles on keypress in React

I also read that string refs are not advised against now, sow I really don't know how to approach this.

Here is the link to my app: https://codesandbox.io/s/github/AldanaBRZ/drum-machine

Solution

  • While string refs are discouraged. You can still use refs by using React.createRef

    ref: https://reactjs.org/docs/refs-and-the-dom.html

    You don't have to use refs even, you can give them all unique ids since they are unique anyways, and then whenever a key is pressed, you can check do a if q is pressed, add pressed class to the q button

    Adding and removing classes on an HTML element in JS can be achieved by the following:

    You can use element.classList.add("pressed") to achieve that. and element.classList.remove("pressed")

    ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList