问在javascript中将活动类添加到父节点

EN

const sounds = [
   {
     key: 'Q',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
     title: 'Title Q'
  },
  {
     key: 'W',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',
    title: 'Title W'
  },
  {
    key: 'E',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
    title: 'Title E'
  },
  {
     key: 'A',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
    title: 'Title A'
  },
  {
    key: 'S',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
    title: 'Title S'
  },
  {
   key: 'D',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
    title: 'Title D'
  },
  {
    key: 'Z',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
    title: 'Title Z'
  },
  {
    key: 'X',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
    title: 'Title X'
  },
  {
    key: 'C',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',
    title: 'Title C'
  }
]

const keys = ['Q','W','E','A','S','D','Z','X','C'];

const App = () => ( 
 <div id='drum-machine' className='container'>
        <div id='display' className='display'>
          <h1> Title </h1>
          {sounds.map((sound, idx, title) => (
          <Box text={sound.key} key={idx} audio={sound.mp3} title={sound.title}/>
          ))}
        </div>
    </div>
);
 
class Box extends React.Component {
  constructor(props) {
    super(props);
    this.audio = React.createRef();
  }
  playSound = () => {
    this.audio.current.play();
    window.document.querySelector('h1').innerText = this.props.title
  }
  

  
  render() {
    const {text, audio} = this.props
    return (
       <div className='drum-pad' onClick={this.playSound} id={`drum-${text}`} >{text}<audio ref={this.audio} src={audio} className='clip' id={text}/>
        </div>
    )
  }
}
 
document.addEventListener('keydown', (e) => {
  {/*sur l'appui d'une touche je crèe un id égale à la key, si cet id correspond à ce lui de audio, je joue l'audio */}
  const id = e.key.toUpperCase();
  const audio = document.getElementById(id);
 
  if (audio) {
    const parent = audio.parentNode;
    parent.classList.add('active');
    audio.play();
    
    {/*Lorsque la touche est relachéé, la touche repasse en affichage normal.
    audio.addEventListener('ended', () => {
      parent.classList.remove('active')
    })*/}
  }
});

ReactDOM.render(<App />, document.getElementById('app')); 

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

* {
  box-sizing: border-box;
}
body {
  background-color: #9b59b6;
  font-family: 'Lato', sans-serif;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container { /* container de l'App id 'drum-machine' */
  background-color: grey;
  padding: 10px;
  width: 380px;
}
.display { /* container des touches */
  background-color: #fff;
  width: 360px;
  display: flex;
  flex-wrap: wrap;
}
.display h1 {
  display: block;
  width: 100%;
  text-align: center;
}
.drum-pad { /* touche */
  height: 100px;
  width: 100px;
  border: 2px solid #333;
  border-radius: 4px;
  background-color: #8e44ad;
  cursor: pointer;
  color: #fff;
  margin: 10px;
  line-height: 100px;
  text-align: center;
  font-size: 60px;
  
  /* Alternative pour centrer les lettre:
   display: flex;
   justify-content: center;
   align-items: center; 
  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'><div>