Блог

Главная - Вопросы по программированию - нажатие клавиши срабатывает несколько раз при нажатии клавиши (reactjs)

нажатие клавиши срабатывает несколько раз при нажатии клавиши (reactjs)

#javascript #reactjs

Вопрос:

Я добавляю прослушиватель событий и проверяю, соответствует ли он уровню 1, но когда я один раз нажимаю клавишу пробела, он срабатывает 50 раз или более. Пожалуйста, помогите

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

Комментарии:

1. Пожалуйста, покажите деталь компонента

2. Вы добавляете в документ список событий. Который сработает в любом месте, где вы нажмете на документ

Ответ №1:

Поскольку это помечено как 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>

Ответ №2:

Это то, что называется Event Bubbling , что в основном означает, что событие запускается один раз для каждого родительского элемента, пока оно не будет достигнуто HTML .

вы можете узнать об этом здесь: https://dev.to/eladtzemach/event-capturing-and-bubbling-in-react-2ffg#:~:text=Event Bubbling and Capturing in Reactamp;text=Bubbling is as straightforward as,our example in the beginning.

вы можете предотвратить поведение по умолчанию, но, как правило, рекомендуется оставить его как есть, если у вас нет конкретного способа его отключения.

из фрагмента кода, я не вижу, почему это с тегами реагировать, но еще одна причина для вашей проблемы заключается в том, что вы может поставить этот код внутри render() функции или внутри любой react life cycle функции, которая вызывает этот фрагмент, чтобы работать с каждым повторно, оставив вам пробить нежелательных слушателей, которые не только функциональностью вы не хотите, но и то, что будет замедлять вас приложение сверхурочно, то есть. пока пользователь не обновит страницу.

Метки: