反应不响应按键事件

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

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

将插入ChildComponentdiv并将任何事件侦听器附加到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上查看实际效果