Question

无论按下什么按钮，我的鼓机都会播放相同的声音，所有链接都是不同的，当我查看console.log输出时，它表明this.audio是我的键对象中的最后一个URL。有人可以解释为什么吗？

const keys = [{
  name: 'Q',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
  description: 'Heater-4_1',
  },{
  name: 'W',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
  description: 'Heater-1',
  },{
    name: 'E',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
  description: 'Kick_n_Hat',
  },{
    name: 'A',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3',
  description: 'Chord_1',
  },{
    name: 'S',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3',
  description: 'punchy_kick_1',
  },{
    name: 'D',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
  description: 'Brk_Snr',
  },{
    name: 'Z',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',
  description: 'Dry_Ohh',
  },{
    name: 'X',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
  description: 'Heater-3',
  },{
    name: 'C',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
  description: 'Dsc_Oh',
  },
];

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      play:false,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.audio);

    this.setState({
      play:!this.state.play,
    });

    this.audio.play();
    this.audio.currentTime = 0;
  }

  render(){
    let drumpad = keys.map(item => <div id={item.description}>
      <div id='display'>
        <button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}
          <audio className='clip' id={item.name} src={item.url} ref={ref => this.audio = ref}/>
        </button>
      </div>
  </div>);

    return (
      <div id='drum-machine'>
        {drumpad}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

在this.audio遍历数组时，您每次都覆盖keys.map()。我会避免一起使用this.audio。只需使用按钮onClick事件。将事件传递给函数，然后使用console.log(event.target.querySelector('audio').play());：

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      play:false,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      play:!this.state.play,
    });

    const audio = event.target.querySelector('audio');

    audio.play();
    audio.currentTime = 0;
  }

  render(){
    let drumpad = keys.map(item => <div id={item.description}>
      <div id='display'>
        <button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}
          <audio className='clip' id={item.name} src={item.url} />
        </button>
      </div>
  </div>);

    return (
      <div id='drum-machine'>
        {drumpad}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

鼓机播放相同的声音

1 个答案: