keydown时多次触发keydown (reactjs)

Question

我正在添加一个事件侦听器并检查其级别是否为1，但当我按一次空格键时，它会触发50次或更多次。请帮帮忙

​

document.addEventListener("keyup", function(e) {
    if(level === 1){
      if(e.code === "Space") {
        console.log('space press');
        click1();
      }
    }
  });

​

Answer 1

由于这是用React标记的，考虑到您在这里拥有的代码和您描述的问题，几乎可以肯定的是，您在每次呈现时都绑定了一个事件侦听器。这意味着你最终得到的听众比你想要的要多得多。你需要做的就是在使用React时使用React。

例如，在下面的示例中，我们有一个输入，它记录任何按键操作，并且我们还手动创建了一个事件侦听器。首先，当你输入的时候，你会得到一个日志。然而，一旦你点击按钮(触发一个重现)，你将开始得到多个“手动”事件，但仍然是单一的"react“事件：

​

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    document.addEventListener("keyup", function(e) {
        console.log('manual space press');
    });
    return <div onKeyUp={(e) => {
        console.log('React: space press');
    }}>
        <button onClick={() => this.inc()}>{this.state.count}</button>
        <input />
    </div>
  }
}

ReactDOM.render(<Hello count={0}/>, 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>

​

Answer 2

这就是所谓的Event Bubbling，这基本上意味着事件在每个父元素上触发一次，直到它到达HTML。

你可以在这里了解它：https://dev.to/eladtzemach/event-capturing-and-bubbling-in-react-2ffg#:~:text=Event%20Bubbling%20and%20Capturing%20in%20React&text=Bubbling%20is%20as%20straightforward%20as,our%20example%20in%20the%20beginning。

您可以阻止默认行为，但如果您没有禁用它的特定用途，则通常情况下最好将其保留为默认行为。

从代码片段中，我不明白为什么这是用react标记的，但是你的问题的另一个原因是你可能把这段代码放在你的render()函数或任何react life cycle函数中，这会导致这段代码与每个重现程序一起运行，给你留下一拳不想要的监听器，这不仅是你不想要的功能，而且还会减慢你的应用程序超时运行。直到用户刷新页面。