Как вызвать дочерний элемент при нажатии на родительский элемент в React?
Итак, я делаю проект драм-машины на Freecodecamp, где я не выполняю это условие.
" Когда я нажимаю на элемент .drum-pad, должен запускаться аудиоклип, содержащийся в его дочернем элементе. " Итак, как мне вызвать дочерний элемент (в данном случае аудиоэлемент для воспроизведения звука) при нажатии или нажатии родительского элемента?
Я написал что-то вроде этого
class Drumset extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick(e){
this.inputElement.click()
}
render() {
return (
<div>
<div id = "drum-machine" class = "containerx box-middle">
<div id = "display">
<div class = "container">
<div class = "row">
<div class = "col">
<button type = "button" class = "drum-pad" id = "Heater-1" onClick = {this.handleClick}>
Q
<audio
class = "clip"
id = "Q"
src = "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
type = "audio/mpeg"
></audio>
Ну, я попытался поместить событие onClick во внутренний элемент, который тоже не работает.
спасибо за предложение!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете получить свой аудиоэлемент, выполнив поиск в DOM, а затем вызвав .play() на нем.
Таким образом, ваш обработчик onClick становится:
handleClick(e){
const audio = document.getElementById("Q");
audio.play();
}
Если у вас есть несколько кнопок с одним звуковым тегом внутри, вы можете использовать один общий обработчик onClick и получить дочерний аудиоэлемент из цели события.
handleClick(e) {
const audio = e.target.children[0];
audio.play();
};
@leverglowhУ меня есть несколько кнопок с несколькими аудиотегами. 2-й будет работать?
если вы имеете в виду 1 кнопка = 1 аудиотег, то да, иначе вам придется использовать что-то для отслеживания количества детей или просто использовать первый (найти по id).
Здравствуйте, напишите, напишите это в функции внутреннего клика
//innerclick function
Const Innerclick(e)=>{
e.stoppropagation()
// do the job here
}
HTML-код JSX здесь
используйте этот npmjs.com/package/use-sound, это очень просто и не нужно создавать тег audio для воспроизведения звуковых файлов.