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

我有两个问题

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

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

等待你的帮助

让{Button，ButtonToolbar，ButtonGroup，Radio，DropdownButton，MenuItem}=ReactBootstrap； 类应用程序扩展了React.Component{ 构造器{ 超级作物； 此.state={ 权力：没错， 乐器:"钢琴",， 纽扣颜色：对， }; this.playSound=this.playSound.bindthis； this.toggle=this.toggle.bindthis； this.changeColor=this.changeColor.bindthis； 康斯特钢琴=[{ 密码：81， keyTrigger:'Q'， id:‘加热器-1’， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3' }, { 密码：87， 键触发器：“W”， id:‘加热器-2’， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' }, { 密码：69， 键触发器：“E”， id:‘加热器-3’， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' }, { 密码：65， keyTrigger:'A'， id:‘加热器-4’， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' }, { 密码：83， keyTrigger:'S'， id:'鼓掌'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' }, { 密码：68， keyTrigger:'D'， id:'打开HH'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' }, { 密码：90， 键触发器：“Z”， id:Kick-n'-Hat， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3' }, { 密码：88， keyTrigger:'X'， id:'踢'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' }, { 密码：67， 键触发器：“C”， id:'关闭HH'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' }, ]; 常数长笛=[{ 密码：81， keyTrigger:'Q'， id:'Chord-1'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3' }, { 密码：87， 键触发器：“W”， id:'Chord-2'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3' }, { 密码：69， 键触发器：“E”， id:'Chord-3'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3' }, { 密码：65， keyTrigger:'A'， id:“Shaker”， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3' }, { 密码：83， keyTrigger:'S'， id:'打开HH'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3' }, { 密码：68， keyTrigger:'D'， id:'关闭HH'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3' }, { 密码：90， 键触发器：“Z”， id:“强力踢”， 网址：'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3' }, { 密码：88， keyTrigger:'X'， id:“侧杆”， 网址：'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3' }, { 密码：67， 键触发器：“C”， id:'陷阱'， 网址：'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3' }]; this.audio=新的Audiopiano[2]。url } 变色{ this.setState{buttonColor:！this.state.buttonColor} } 播放声音{ 如果this.state.power==true{ 这个。音频。播放； 这是改变颜色； setTimeout=>this.changeColor，200 } }; 拨动{ 这个.setState{ 电源：！this.state.power， }; console.log！this.state.power }; 渲染{ 让btn_style=this.state.buttonColor？'primary'：'warning' 回来 Q W E A. s D Z X C 昂恩 关 卷+ 卷- 钢琴套件 长笛套件 } } ReactDOM.render , document.getElementById'drum-machine' ; 容器{ 背景色：F5； 保证金：30像素自动； 宽度：30%； 高度：200px； 边框：3px实心337ab7； 填充：10px； } .按钮{ 浮动：左； } .收音机{ 显示：内联块； 保证金：4倍； } .一线{ 利润率：10px； } 展示{ 背景色：337ab7； 浮动：左； 宽度：180px； 高度：40px； 颜色：白色； }

---

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

<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>

---

Thx mate。我照你说的做了，把索引号作为我函数的键。现在试着用函数play@sinan如果对你有帮助的话。你能接受这个答案吗？谢谢你，伙计。我会的，但我无法解决与按钮样式相关的问题

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