Question

我正在尝试实施一些非常基本的按键检测，但我根本无法使用它。我有一个应该在onKeyDown事件中获取的裸组件，但在控制台中没有任何内容被注销：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent onKeyDown={this.handleKeyDown} />
    );
  }
}

React.render(<App />, document.getElementById('app'));

Answer 1

您需要为元素（例如包装元素）分配tabIndex - 属性，以便接收按键。然后使用props将keyDown处理程序传递给它：

import React from 'react';
import { render } from 'react-dom';

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div> 
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent handleKeyDown={() => this.handleKeyDown()} />
    );
  }
}

render(<App />, document.getElementById('app'));

Answer 2

DOM希望对焦元素以便接收键盘事件。如果您不想使用tabIndex或contentEditable来破解元素以使其聚焦，您可以在window上使用本机DOM事件侦听器，并在每个组件中定义不同的处理程序处理键盘事件。

请确保在卸载该组件时删除事件侦听器，以便所有组件不会一直处理：

  componentWillMount: function() {
    window.addEventListener('keydown', this.handleKeyDown);
  },

  componentWillUnmount: function() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },

此外，似乎有一个npm提供类似的功能，如果这更容易：https://www.npmjs.com/package/react-keydown

Answer 3

问题是ChildComponent不是组件而是组件工厂。它将替换为渲染使用该工厂创建的元素的结果。

在div中插入ChildComponent并将任何事件侦听器附加到div，而不是ChildComponent。如果您需要内嵌显示，请将<div>替换为<span>。

let {Component} = React;

class ChildComponent extends Component {
  render() {
    return ( <child-component>click me</child-component> );
  }
}

class App extends Component {
  handleClick(event) {
    console.log('handling a key press');
  }

  render() {
    return ( <div onClick={this.handleClick}><ChildComponent  /></div> );
  }
}

React.render(<App />, document.getElementById('app'));

在codepen

上查看此操作

Answer 4

在我的团队正在开发的应用中，我们正在使用react-hotkey。不幸的是，React似乎不支持使用ES6语法的mixins，但如果你对某些babel很酷，你可以尝试一下。

let App = React.createClass({
  mixins: [hotkey.Mixin('handleKeyDown')],

  componentDidMount() {
    hotkey.activate();
  },

  componentWillUnmount() {
    hotkey.disable();
  },

  handleKeyDown(event) {
    console.log('handling a key press');
  },

  render() {
    return (
      <ChildComponent />
    );
  }
});

React.render(<App />, document.getElementById('app'));

React没有响应按键事件

4 个答案: