在 CodePen 中使用 React 获取对象错误

Question

我正在尝试制作一种鼓机，当按下每个按钮时它会播放不同的声音。我正在使用 CodePen 制作项目，当我尝试使用 DrumPad 组件时，我不断收到对象错误。任何帮助将不胜感激。相关代码如下。

这是我的 CodePen 应用程序的 link：https://codepen.io/bbond766/pen/NWdLNog?editors=0010

const name = "drum-pad-";

class DrumPad extends React.Component{
  constructor(props){
    super(props);
  }
  name = name + this.props.letter;
  render(){
    return (<button id={name} class="drum_pad" type="button" onClick={this.props.click}>{this.props.letter}<audio id={this.props.letter} src={this.props.audio} /></button>);
  }
}

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      sound:""
    }
  }
  
  handleClick = value => {
    this.setState({
      sound: value
    })
  }
  
  
  render(){
    return <div id="drum-machine">
      <div id="drumpad">
        <DrumPad letter="Q" audio = "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" click={this.handleClick("Heater-1")} />
        <DrumPad letter="W" audio = "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" click={this.handleClick("Heater-2")} />
        <button id="drum-pad-e" class="drum_pad">E<audio id="E" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'" /></button>
        <button id="drum-pad-a" class="drum_pad">A<audio id="A" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'" /></button>
        <button id="drum-pad-s" class="drum_pad">S<audio id="S" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'" /></button>
        <button id="drum-pad-d" class="drum_pad">D<audio id="D" src="'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'" /></button>
        <button id="drum-pad-z" class="drum_pad">Z<audio id="Z" src="'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'" /></button>
        <button id="drum-pad-x" class="drum_pad">X<audio id="X" src="'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'" /></button>
        <button id="drum-pad-c" class="drum_pad">C<audio id="C" src="'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'" /></button>
        
      </div>
      <div id="display">
        <text>{this.state.sound}</text>
      </div>
    </div>
  }
}

Answer 1

像这样改变你的handleClick方法

handleClick = sound => () => {
    this.setState({ sound })
}

在 CodePen 中使用 React 获取对象错误

Getting Object Error with React in CodePen

javascript

reactjs

codepen