当我的鼓垫触发 onClick 函数时，我该如何设置状态？

Question

我是 React 的新手，目前正在构建鼓机。我已经连接鼓机来播放包含在其 DrumPad 子组件中的音频。我的问题是，每当单击其父鼓垫 div 时，我无法创建一个代表每个音频显示的 id。我知道我需要初始化状态然后设置状态但我不知道如何在我的代码中实现它。

这是我的代码

import React from 'react';

import './App.css';

import soundData from "./soundData.js"

import DrumPad from "./drumPad.js"

class App extends React.Component {

  constructor(props){

   super(props)

     this.state = {

       display : "hello",

      }

      this.handleDisplay = this.handleDisplay.bind(this)

    }

    

 handleDisplay (){

   this.setState({display: }) //what do i need to do here?

 }

    render(){

    

    return(

     <div 

     id="drum-machine" 

     >

       

     <div

     id="display"

     >

       {this.state.display}

     </div>

     {soundData.map((data) => 

     (

        <DrumPad 

        data={data} 

        key={data.letter} 

        id = {data.id}

        handleDisplay = {this.handleDisplay}

        

        

         />

      ))}

     </div>

    )

     }

  }

export default App;

**drumPad.js**

import React from "react"

function DrumPad(props){

    

  function handleClick(){

        

        const audio =  new Audio(props.data.src)

        audio.play()

        audio.currentTime = 0  

       

        }

 

        return(

            <div 

            className= "drum-pad" 

            id = {props.data.id} 

            onClick = {handleClick}

            >

                <h1>{props.data.letter}</h1>

                <audio 

                className = "clip" 

                id = {props.data.letter} 

                src = {props.data.src}

                

                />            

            </div>

        )

    

}

    

export default DrumPad

Answer 1

为了更新状态，您需要将函数 handleDisplay 传递给 DrumPad，并在 handleClick 中调用 handleDisplay，将所需数据作为参数传递。代码沙箱//App.js    handleDisplay(key) {    this.setState({      display: key    });  }//DrumPad.js  function handleClick() {    const audio = new Audio(props.data.src);    audio.play();    audio.currentTime = 0;    props.handleDisplay(`${props.data.letter} : ${props.data.id}`);  }