javascript - React 有 2 个问题，通过单击更改单个按钮的颜色并在每次单击时播放不同的声音

Question

我有 2 个问题，

在第一个中，我设法通过单击更改按钮的颜色，因为我给出了相同样式状态的 Q 和 W 按钮，两个按钮的颜色在每次单击时都会发生变化。我想更改单击按钮的颜色。

第二个问题是我想在每个点击按钮中播放不同的音调，我不知道如何根据按钮访问数组 url 并将其传递给我的 playSound 函数。我可以为每个按钮创建 9 个不同的功能，但这没有意义。

等待您的帮助

let { Button, ButtonToolbar, ButtonGroup, Radio, DropdownButton, MenuItem } = ReactBootstrap;

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        power: true,
        instrument: 'piano',
        buttonColor:true,
    };
    this.playSound = this.playSound.bind(this);
    this.toggle = this.toggle.bind(this);
    this.changeColor =this.changeColor.bind(this);
    

    const piano = [{
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  }, {
    keyCode: 83,
    keyTrigger: 'S',
    id: 'Clap',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  }, {
    keyCode: 68,
    keyTrigger: 'D',
    id: 'Open-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  }, {
    keyCode: 90,
    keyTrigger: 'Z',
    id: "Kick-n'-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  }, {
    keyCode: 88,
    keyTrigger: 'X',
    id: 'Kick',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  }, {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];
  

  const flute = [{
  keyCode: 81,
  keyTrigger: 'Q',
  id: 'Chord-1',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
}, {
  keyCode: 87,
  keyTrigger: 'W',
  id: 'Chord-2',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
}, {
  keyCode: 69,
  keyTrigger: 'E',
  id: 'Chord-3',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
}, {
  keyCode: 65,
  keyTrigger: 'A',
  id: 'Shaker',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
}, {
  keyCode: 83,
  keyTrigger: 'S',
  id: 'Open-HH',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
}, {
  keyCode: 68,
  keyTrigger: 'D',
  id: 'Closed-HH',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
}, {
  keyCode: 90,
  keyTrigger: 'Z',
  id: 'Punchy-Kick',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
}, {
  keyCode: 88,
  keyTrigger: 'X',
  id: 'Side-Stick',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
}, {
  keyCode: 67,
  keyTrigger: 'C',
  id: 'Snare',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
}];
    this.audio = new Audio(piano[2].url)
  }


  changeColor(){
    this.setState({buttonColor: !this.state.buttonColor})
  }
  
  playSound(){
    if (this.state.power == true) {
      this.audio.play();
      this.changeColor();
      setTimeout(() => this.changeColor(), 200 ) 
    }
  };
  
  toggle() {
    this.setState({ 
      power: !this.state.power,
    });
    console.log(!this.state.power)
    
  };
  
  render(){
    let btn_style = this.state.buttonColor ? 'primary' : 'warning'
    return(
    <div id='container' >
      <div className='buttons' >
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {this.playSound} >Q</Button>
            <Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {this.playSound} >W</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">E</Button>
          </ButtonToolbar>
        </div>
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">A</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">S</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">D</Button>
          </ButtonToolbar>   
        </div>  
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">Z</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">X</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">C</Button>
          </ButtonToolbar>   
        </div>
      </div>
      <div className='setting'>
        <div>
          <ButtonGroup className='radio' >
            <Radio name="groupOptions" defaultChecked onChange={this.toggle} >ONN</Radio>     
            <Radio name="groupOptions" onChange={this.toggle} >OFF</Radio>  
          </ButtonGroup>
        </div>
        <div>
          <div id='display'></div>          
        </div>
        <div>
          <ButtonGroup className='radio' >
            <Button bsStyle="success">Vol +</Button>
            <Button bsStyle="danger">Vol -</Button>
          </ButtonGroup>
          <DropdownButton title="Select the instrument" className='changeTune' >
            <MenuItem name="groupOptions" active >Piano Kit</MenuItem>           
            <MenuItem name="groupOptions">Flute Kit</MenuItem>  
          </DropdownButton>          
        </div>
      </div>
    </div>
    )
  }
}

ReactDOM.render(
	<App/>,
    document.getElementById('drum-machine')
);

#container {
  background-color: #f5f5f5;
  margin: 30px auto;
  width: 30%;
  height: 200px;
  border: 3px solid #337ab7;
  padding: 10px;
}

.buttons {
  float: left;
}

.radio {
  display: inline-block;
  margin: 4px;
}

.firstLine {
  margin: 10px;
}

#display {
  background-color: #337ab7;
  float: left;
  width: 180px;
  height: 40px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id='drum-machine'></div>

Answer 1

您面临这两个问题，因为您对两个键使用相同的功能。您可以通过以下方式修改您的代码:

<Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {() => this.playSound('Q')} >Q</Button>
<Button bsStyle= {btn_style} className='drum-pad' bsSize="large" onClick = {() => this.playSound('W')} >W</Button>

这样您就可以向函数发送参数。

在您的函数中，您可以访问它并根据参数采取操作。

playSound(key){
    // You can now take actions based on key value
    if (this.state.power == true) {
      this.audio.play();
      this.changeColor();
      setTimeout(() => this.changeColor(), 200 ) 
    }
  };