【发布时间】：2018-08-28 03:15:46
【问题描述】：
我正在学习 React 并致力于构建 drum machine。我在使用 onKeyPress 按钮单击时触发声音时遇到问题。用鼠标单击时，按钮和声音可以正常工作，但要让它们在键盘按下时工作，您首先必须用鼠标单击该按钮。
似乎一旦您单击一个按钮，该按钮就会保持焦点，直到用鼠标单击另一个按钮。
如何使用 onKeyPress 触发带按键的按钮？ onKeyPress 不是处理此类事情的正确方法吗？
这似乎是与单击时被聚焦的按钮有关的问题。
代码如下：
我有一个鼓显示组件，其中每个按钮/div 如下所示：
<DrumPad
id='Q'
soundName='Heater 1'
sound="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
buttonClicked={props.buttonClicked}
name={props.name}
handleClick={props.handleClick}
onKeyPress={props.onKeyPress}
/>
然后在另一个组件中，我有一个鼓垫组件，用于设置每个按钮及其功能：
import React, { Component } from 'react';
const DrumPad = (props) => {
return (
<div className="drum-pad"
onClick={() => props.handleClick(props.id, props.soundName)}
onKeyPress={() => props.handleClick(props.id, props.soundName)}
tabIndex="0">
<audio className="clip" id={props.id}>
<source src={props.sound} type="audio/mp3" />
</audio>
<span>{props.id}</span>
</div>
);
}
export default DrumPad;
我的 App.js 主要组件很简单，由本地状态和处理按钮点击的 handleClick 函数组成：
import React, { Component } from 'react';
import './App.css';
import DrumDisplay from './DrumContainer';
import MySlider from './Slider.js';
import handle from './Slider.js';
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import Tooltip from 'rc-tooltip';
class App extends Component {
constructor(props) {
super(props);
this.state = {
buttonClicked: '',
name: ''
}
}
handleClick = (e, name) => {
this.setState({ buttonClicked: e })
this.setState({ name: name})
const sound = document.getElementById(e);
sound.volume = 1;
sound.play();
}
render() {
return (
<DrumDisplay
buttonClicked={this.state.buttonClicked}
name={this.state.name}
handleClick={this.handleClick}
onKeyPress={this.handleClick}
/>
);
}
}
export default App;
在此按钮 onKeyPress 问题上停留了一段时间。任何帮助表示赞赏。
【问题讨论】：
-
我不确定，但我认为您最好在渲染或安装您的反应组件后检查 DrumDispay 组件是否有焦点。
-
你会如何建议这样做？
-
你可以喜欢它。 （这只是伪代码，那是因为我不完全了解您的情况）` class DrumDisplay extends React.Component { componentDidMount() { this._wrapper.focus(); } render() { returnthis._wrapper = e }>} } `我认为如果你附加的关键事件监听器的DOM元素没有焦点，你可以输入键就可以了。
-
糟糕，我在评论中写的代码看起来损坏了ㅜ-ㅜ。我相信你可以美化它。
标签： reactjs onclick event-handling keypress onkeypress