реагировать js eventListeners не удаляются, как ожидалось

Question

Я работаю над веб-приложением реагирования, которое состоит из нескольких страниц. Я установил реагирующий маршрутизатор, который переключается между страницами.

Что-то вроде:

render((
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={RedirectPage} />
                <Route exact path='/sign-in' render={() => <PlayerSelect />}/>
                <Route exact path='/most-recent-scenario' render={() => <ScenarioInterface />} />
                <Route exact path='/home' render={() => <Home />} />
                <Route exact path='/scenario/:id' render={props => <Index {...props} /> } />
                <Route exact path='/user-select' render={() => <UserSelect />}/>
            </Switch>
        </BrowserRouter>
    </Provider>
), document.getElementById('root'));

На самих страницах я использую функцию react-router Redirect для навигации туда и сюда. Что-то вроде:

import { Redirect} from 'react-router-dom'

class Index extends React.Component {
  state = {
    ...
    redirect: false,
    redirect_to: ""
  }

  setRedirect = (page) => {
      this.setState({
      redirect: true,
      redirect_to: page})
  }

  renderRedirect = () => {
  if (this.state.redirect) {
      return <Redirect to={this.state.redirect_to} /> }
  }

  render(){
    return (
        <div className={classes.root}>
          {this.renderRedirect()}
          ...

Это все работает. Однако на одной странице я использую некоторые привязки клавиш.

Я узнал, что лучший способ назначить привязки клавиш - это делать при создании компонента, как <MyWebpage onKeyDown={handleKeyDown} />, но по устаревшим причинам это не так просто для меня, и в настоящее время я делаю привязки клавиш с помощью :

  componentDidMount(){
    document.addEventListener("keydown", this.handleKeyDown.bind(this));
    document.addEventListener("keyup", this.handleKeyUp.bind(this));}

  componentWillUnmount(){
    document.removeEventListener("keydown", this.handleKeyDown.bind(this));
    document.removeEventListener("keyup", this.handleKeyUp.bind(this));}

Я считаю, что handleKeyDown все еще вызывается, даже после того, как я перешел на другую страницу. Я проверил: componentWillUnmount вызывается и выполняется.

Итак, я хотел бы выяснить, почему мои removeEventListener не работают и как их исправить.

Answer 1

Вы должны связать методы внутри конструктора. AddEventListener и RemoveEventListener должны получить одни и те же экземпляры метода, чтобы работать, и я подозреваю, что привязка возвращает новый «связанный» метод, поэтому они не совпадают.

После привязки методов в Ctor, просто перейдите к обработке событий, они уже будут связаны

Answer 2

Вы должны удалить того же слушателя, которого добавляете. Поэтому я предлагаю создать окончательную версию, связанную с this в constructor и манипулировать ею в обратных вызовах жизненного цикла:

  .....

  constructor(props) {
    super(props);

    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyDown);
    document.addEventListener("keyup", this.handleKeyUp);
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyDown);
    document.removeEventListener("keyup", this.handleKeyUp);
  }

  .....

Answer 3

Вы должны передать ту же функцию, что и второй параметр, в addEventListener / removeEventListener из глобальной окна переменной: То же самое относится и к addEventLsitener:

componentDidMount () {
  window.addEventListener("keydown", this.handleKeyDown);
}


componentWillUnmount(){
     window.removeEventListener("keydown", this.handleKeyDown);
     window.removeEventListener("keyup", this.handleKeyUp);
    }