javascript - react js eventListeners 没有按预期删除

Question

我正在开发一个包含多个页面的 React Web 应用程序。我设置了一个在页面之间切换的 React 路由器。

类似于:

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()}
          ...

这一切都有效。但是，在一页上，我使用了一些键绑定(bind)。

我了解到分配键绑定(bind)的最佳方法是在创建组件时执行，例如 <MyWebpage onKeyDown={handleKeyDown} /> ，但由于遗留原因，这对我来说并不容易，目前我使用 :

进行键绑定(bind)

  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

您应该删除您添加的同一个监听器。所以我建议在 constructor 中创建一个绑定(bind)到 this 的最终版本，并在生命周期回调中对其进行操作:

  .....

  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);
  }

  .....