当我的鼓垫触发 onClick 功能时如何设置状态？

Question

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

这是我的代码

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

**soundData.js**

const soundData = [{ 

 letter:"Q",
 src:"https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav",
 id: "clap"

},{

 letter:"W",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav",
    id:"hihat"
 }, {

    letter:"E",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav",
    id:"kick"
  },{

    letter:"A",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav",
    id:"openhat"
   },{

    letter:"S",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav",
    id:"boom"
 },{

    letter:"D",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav",
    id:"ride"
 },{

    letter:"Z",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav",
    id:"snare"
 },{

    letter:"X",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav",
    id:"tom"
 },
{

    letter:"C",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav",
    id:"tink"
 }]

   export default soundData

Answer 1

为了更新状态，你需要将函数handleDisplay传递给DrumPad，并在handleClick内部调用handleDisplay，将需要的数据作为参数传递。

CodeSandbox

//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}`);
  }