javascript - React:如何使按钮由特定键以及 onClick 事件触发?
问题描述
基本上我正在做一个鼓机项目,我需要屏幕上显示的 9 个按钮中的每一个都可以通过鼠标点击以及相关的键盘键进行点击。
将其设置为与鼠标一起使用onClick
,每个按钮单击都附加事件非常简单,但我很难让它与键盘一起使用。
到目前为止,我已经完成了以下工作:
1)设置componentDidMount()
一个事件监听器来读取每个按键:
componentDidMount() {
const setKey = (event) => { this.setState({ keyPressed: event.key.toUpperCase() }) }
document.addEventListener('keydown', setKey);
}
2)设置componentDidUpdate()
检查当前按下的键是否在应用程序中使用的键中,然后触发handleClick
函数并传递几个参数:
componentDidUpdate() {
if (this.state.keyList.includes(this.state.keyPressed)) {
this.handleClick("keydown", this.state.keyPressed)
}
}
3)最后,handleClick
检查是否是“keydown”或“click”事件并播放相应的<audio>
:
handleClick(event) {
if (arguments[0] === "keydown") {
var audio = document.getElementById(arguments[1])
} else {
const { name, value } = event.target
this.setState({
displayValue: value
})
var audio = document.getElementById(name)
}
audio.paused ? audio.play() : audio.currentTime = 0
}
我的代码目前能够为这两种场景播放相应的音频,但我不确定如何让它显示按钮的相应值,以防它被键盘按钮触发,因为我不知道如何通过event.target
就像为onClick
场景所做的那样。
此外,可能主要问题是,最终我想为这个项目设置 CSS 和 Bootstrap,并且按钮应该在播放时改变它的颜色,以及当它被键盘触发时。我现在所做的只是一种解决方法,当需要进行设置时,它不会以这种方式工作。
无论如何我可以在按下相应的键盘键时触发按钮,并以我通过它时的行为方式进行操作onClick
吗?
class App extends React.Component {
constructor() {
super()
this.state = {
displayValue: "",
keyPressed: "",
keyList: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"]
}
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
const setKey = (event) => { this.setState({ keyPressed: event.key.toUpperCase() }) }
document.addEventListener('keydown', setKey)
}
componentDidUpdate() {
if (this.state.keyList.includes(this.state.keyPressed)) {
this.handleClick("keydown", this.state.keyPressed)
}
}
handleClick(event) {
if (arguments[0] === "keydown") {
var audio = document.getElementById(arguments[1])
} else {
const { name, value } = event.target
this.setState({
displayValue: value
})
var audio = document.getElementById(name)
}
audio.paused ? audio.play() : audio.currentTime = 0
}
render() {
return (
<div id="drum-machine">
<div id="display">{this.state.displayValue}</div>
<div className="drum-pad" id="pad-q">
<button type="button" name={this.state.keyList[0]} value="Chord 1" onClick={this.handleClick}>Q</button>
<audio className="clip" id={this.state.keyList[0]} src="https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3"/>
</div>
<div className="drum-pad" id="pad-w">
<button type="button" name={this.state.keyList[1]} value="Chord 2" onClick={this.handleClick}>W</button>
<audio className="clip" id={this.state.keyList[1]} src="https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"/>
</div>
<div className="drum-pad" id="pad-e">
<button type="button" name={this.state.keyList[2]} value="Chord 3" onClick={this.handleClick}>E</button>
<audio className="clip" id={this.state.keyList[2]} src="https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3"/>
</div>
<div className="drum-pad" id="pad-a">
<button type="button" name={this.state.keyList[3]} value="Shaker" onClick={this.handleClick}>A</button>
<audio className="clip" id={this.state.keyList[3]} src="https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"/>
</div>
<div className="drum-pad" id="pad-s">
<button type="button" name={this.state.keyList[4]} value="Open HH" onClick={this.handleClick}>S</button>
<audio className="clip" id={this.state.keyList[4]} src="https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3"/>
</div>
<div className="drum-pad" id="pad-d">
<button type="button" name={this.state.keyList[5]} value="Closed HH" onClick={this.handleClick}>D</button>
<audio className="clip" id={this.state.keyList[5]} src="https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3"/>
</div>
<div className="drum-pad" id="pad-z">
<button type="button" name={this.state.keyList[6]} value="Punchy Kick" onClick={this.handleClick}>Z</button>
<audio className="clip" id={this.state.keyList[6]} src="https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3"/>
</div>
<div className="drum-pad" id="pad-x">
<button type="button" name={this.state.keyList[7]} value="Side Stick" onClick={this.handleClick}>X</button>
<audio className="clip" id={this.state.keyList[7]} src="https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3"/>
</div>
<div className="drum-pad" id="pad-c">
<button type="button" name={this.state.keyList[8]} value="Snare" onClick={this.handleClick}>C</button>
<audio className="clip" id={this.state.keyList[8]} src="https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"/>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>
解决方案
推荐阅读
- matplotlib - 在 matplotlib ArtistAnimation 期间动态缩放轴
- javascript - next.js 中的多个环境变量
- node.js - 尝试将更改的电子表格数据输出到控制台时,Google Sheets node.js api 给出错误“未处理的承诺拒绝”
- functional-programming - F#预计算逻辑的正确理解
- xero-api - 如何根据 InvoiceId 过滤 Batchpayments?
- javascript - 如何使用 javascript 将一小时添加到本地日期时间
- c - Unity 的链接器错误(C 单元测试框架)
- angular - 如何从下拉列表和 *ngFor 中创建的文本中获取 component.ts 中的输入值
- active-directory - 是否可以在没有 RDN 的情况下仅使用属性创建 LDAP 服务器条目?
- javascript - 修复没有 **position:fixed** 的图像位置