Question

我有一个简单的React组件，它应该通过keyDown上的Web Audio API播放音频，并在keyUp上停止音频。我have a JSFiddle显示了我在localhost上看到的相同行为。这是代码内联：

var Keyboard = React.createClass({
  componentDidMount: function () {
    var context = new (window.AudioContext || window.webkitAudioContext)();
    var oscillator = context.createOscillator();
    var gain = context.createGain();

    oscillator.type = 'sine';
    oscillator.frequency.value = 3000;
    gain.gain.value = 0.5;

    oscillator.connect(gain);
    gain.connect(context.destination);

    this.setState({
      context: context,
      oscillator: oscillator,
      gain: gain
    });
  },

  render: function() {
    return (
      <div id="keyboard"
           onKeyDown={this.playNote}
           onKeyUp={this.stopNote}>
      </div>
    );
  },

  playNote: function (ev) {
    console.log('play');
    this.state.oscillator.start();
  },

  stopNote: function (ev) {
    console.log('stop');
    this.state.oscillator.stop();
  }
});

React.render(<Keyboard />, document.getElementById('container'));

即使没有Web Audio的东西，我也无法显示日志语句。我已经阅读了React Event System文档并没有看到任何有用的东西，而且我已经使用鼠标和更改事件编写了其他React组件而没有任何问题 - 它似乎特别适用于键盘事件。任何帮助将不胜感激！

编辑：更正了网络音频API调用。应该是start（），而不是play（）。

Answer 1

<div>是容器元素，而不是input元素。键盘事件仅由<inputs>，<textarea>以及具有contentEditable属性的任何内容生成。

你可以尝试

render: function() {
    return (
      <div id="keyboard"
           contentEditable={true}
           onKeyDown={this.playNote}
           onKeyUp={this.stopNote}>
      </div>
    );
}

但这不是一个有保证的解决方案......只是一个起点：）

Answer 2

我刚遇到这个问题并找到了两个解决方案：

直接

正如类似的SO问题"onKeyDown event not working on divs in React"（以及ncubica的评论中所述）中所述，例如包括tabIndex="0"：

<div 
  id="keyboard"
  tabIndex="0" 
  onKeyDown={this.playNote}
  onKeyUp={this.stopNote}>
</div>

变通

只需在您的eventListener()生命周期中添加vanillaJS componentWillMount()即可在您的网页呈现时加载事件监听器（详情请参阅：Adding Lifecycle Methods to a Class）

document.addEventListener("keydown", this.playNote);
document.addEventListener("keyup", this.stopNote);

反应键盘事件未触发

2 个答案:

直接

变通