在 ReactJS 中按 window 向左或向右箭头键增加或减少计数器

Question

您好，我编写了一个代码块，当我选择按钮元素时，计数器的递增或递减发生。这是我的代码：

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0
    };
  }


  increment = (e) => {
    if (e.keyCode === 39) {
      this.setState({
        clicks: this.state.clicks + 1
      })
    }
  }

  decrement = (e) => {
    if (e.keyCode === 37) {
      this.setState({
        clicks: this.state.clicks - 1
      })
    }
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  };
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.DecreaseItem} onKeyDown={this.decrement} tabIndex="0">
          -1
        </button>
        <span>{this.state.clicks}</span>
        <button onClick={this.IncrementItem} onKeyUp={this.increment} tabIndex="0">
          +1
        </button>
      </div>
    );
  }
}

export default App;

我想要发生的是，当我按下左箭头键时，它应该自动递减值而不需要按钮元素是 selected/focused。右箭头键操作也类似。

有人可以帮忙吗？

提前致谢。

Answer 1

在您的情况下，要侦听键盘事件，您必须为 document/window 添加事件侦听器，而不是在按钮元素上。

请参考以下代码片段。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0
    };
  }

 componentDidMount() {
    document.addEventListener('keydown', this.keydown);
  }
 componentWillUnmount() {
    document.removeEventListener('keydown', this.keydown);
 }

  keydown = (e) => {
    if (e.keyCode === 39 || e.keyCode === 37) {
      this.setState({
        clicks: this.state.clicks + (e.keyCode === 39 ? 1 : -1)
      })
    }
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  };
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.DecreaseItem} tabIndex="0">
          -1
        </button>
        <span>{this.state.clicks}</span>
        <button onClick={this.IncrementItem} tabIndex="0">
          +1
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

在 ReactJS 中按 window 向左或向右箭头键增加或减少计数器

Increment or decrement counter on left or right arrow key press on window in ReactJS

javascript

reactjs

keypress