@Paxest
Freecodecamp camper :)

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

Доброго времени суток!
При нажатии любой клавиши клавиатуры звук проигрывается, если в функции 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"));
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
miraage
@miraage
Старый прогер
Теряется контекст.
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, 
  };
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
При передаче метода justAdd в слушатель, теряется контекст. Хорошим решением будет использовать вместо метода стрелочную функцию:
justAdd = () => {
  this.playMusic();
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы