reactjs - React-Redux:绑定(bind)按键操作以启动 reducer 序列的规范方法是什么？

Question

这是一个关于react-redux的新手问题，我花了几个小时四处寻找才发现，所以我发布这个问题，然后为后代回答，也可能是代码审查。

我正在使用react-redux创建一个游戏，我想使用WASD键在小 map 上移动角色。 (这只是更大努力的实践示例)。该 map 只是由一堆彩色 <div> 组成。 s。

据我了解，我需要以某种方式将按键事件绑定(bind)到React DOM中的某些内容，以便触发mapDispatchToProps，然后启动reducers的重新评估。问题是，这是一个按键，没有什么可以绑定(bind)的。我正在使用 jquery 绑定(bind)按键并调用函数。

相关查询:

• React - detect 'enter' key press in change event这个没有什么帮助，因为它只绑定(bind)到文本区域的 onChange 事件
• https://facebook.github.io/react/docs/events.html#keyboard-events没有告诉你如何绑定(bind)，事实上我真的不知道如何在元素上使用 onKeyDown !奇怪。

Answer 1

您基本上可以在keypress事件处理程序中触发操作

class App extends React.Component {

  constructor() {
    super();
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress(event) {
    // you may also add a filter here to skip keys, that do not have an effect for your app
    this.props.keyPressAction(event.keyCode);
  }

  componentDidMount() {
     document.addEventListener('keypress', this.handleKeyPress);
  }

  componentWillUnmount() {
     document.removeEventListener('keypress', this.handleKeyPress);
  }

  render() {
    return <div>Your game content</div>;
  }
}

export default connect(mapStateToProps, {keyPressAction})(App)

handleKeyPress 调用操作创建者，它将操作下推到 reducer 。