Почему не проигрывается звук при нажатии клавиши?

Question

[Paxest]

Доброго времени суток!
При нажатии любой клавиши клавиатуры звук проигрывается, если в функции justAdd задействовать Audio, если же Audio в другой функции, и разместить ссылку на эту функцию, то мелодия не играет.
Объясните, пожалуйста, процессы, т.к. для меня эти две функции равнозначны, но если в одном случае работает, а в другом нет, то значит это совершенно разные вещи..

class App extends React.Component {
    componentDidMount() {
    document.addEventListener('keydown', this.justAdd);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.justAdd);
  }
justAdd() {
   // если задействовать sound то мелодия проигрывается при нажатии на клавиши клавиатуры
   // const sound = new Audio("https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3");
   //  sound.play();

  // если задействовать функцию playMusic с идентичным кодом, то нажатия не работают
  //this.playMusic();
  }
  
  playMusic() {
   const sound = new Audio("https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3");
   sound.play();
  }
  
  render() {
    return (
    <div>Музыку! </div>
    
    )
  }
}
React.render(<App />, document.getElementById("app"));

Answer 1

[Mikhail Osher]

Теряется контекст.
https://developer.mozilla.org/en-US/docs/Web/JavaS...
https://reactjs.org/docs/faq-functions.html

Можно либо bound arrow function сделать (требуется babel plugin, работает из коробки, если у Вас create-react-app), либо bind в конструкторе.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.justAdd = this.justAdd.bind(this);
  }

  justAdd() {
    // your logic
  }
}

class App extends React.Component {
  // option 2
  justAdd = () => {
    // your logic, 
  };
}

Comments

[Paxest]

Спасибо большое! Пытался сам через конструктор связать, но из-за того что выставил старую версию React в codepen написание некоторых вещей было некорректно и не работало, сейчас выставил самую последнюю, исправил пару ошибок и заработало! И такого нюанса со стрелочными функциями в реакте не знал. Полезно, спасибо еще раз Mikhail Osher и Антон Спирин !

Answer 2

[Антон Спирин]

При передаче метода justAdd в слушатель, теряется контекст. Хорошим решением будет использовать вместо метода стрелочную функцию:

justAdd = () => {
  this.playMusic();
};

Comments

[Paxest]

Спасибо!