如何在 React 上单击父元素时触发子元素？

Question

所以我在 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 事件放在内部元素上，这也不起作用。

Answer 1

您可以通过搜索 DOM 然后调用 .play() 来获取您的音频元素。

因此您的 onClick 处理程序变为：

handleClick(e){
   const audio = document.getElementById("Q");
   audio.play();
}

如果您有多个按钮，所有按钮内部都只有 1 个音频标签，您可以使用一个通用的 onClick 处理程序并从事件的目标中获取子音频元素。

handleClick(e) {
    const audio = e.target.children[0];
    audio.play();
};

Answer 2

你好写在内部点击函数中写这个

//innerclick function 
Const Innerclick(e)=>{
e.stoppropagation()
// do the job here
}

这里是 Jsx 代码html

如何在 React 上单击父元素时触发子元素？

How to trigger child element while clicking parent element on React?

html

javascript

css

parent-child

reactjs