javascript - 在IE11中将其删除后调用的事件监听器函数

Question

我一直在构建组件，以侦听对整个文档的单击，并偶然发现了IE11问题。

我编写了几个简单的组件来重现此问题。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false
    }
  }

  render() {
    return ( 
      <div>
        <button 
          onClick={() => this.setState({
              show: !this.state.show
          })}
        >
          Toggle
        </button>
        
        <div>
          {this.state.show && (
            <Component />
          )} 
        </div>
      </div>
    )
  }
}

class Component extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    console.log('listener added')
    document.addEventListener('click', this.handleClick)
  }

  componentWillUnmount() {
    console.log('listener removed')
    document.removeEventListener('click', this.handleClick)
  }

  handleClick() {
    console.log('clicked!');
    const node = ReactDOM.findDOMNode(this);
  }

  render() {
    return <div>Component</div>
  }
}


ReactDOM.render(
  <App /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

因此， Component组件将单击侦听器添加到文档中，并且 App组件负责安装和卸载 Component。

当安装了 Component时，应用了事件侦听器，并且在卸载了它时，一切都在Chrome和Firefox中完美运行。

但是，在IE11中，删除侦听器后，仍然会调用处理函数，并抛出错误，因为它尝试对已卸载组件的 findDOMNode进行编码。这可能不是一个棘手的问题，但它仍然困扰着我，我想知道是否有任何解决方法。

另外，请注意-停止通过 event.stopPropagation进行传播不是一种选择，因为在我的应用程序中 Component可以通过多种方式卸载，单击按钮只是一个示例

JSFiddle reproducing the issue

Answer 1

似乎是IE11中的错误。一些选择:

1。

应该使用window.addEventListener/window.removeEventListener和document.addEventListener/document.removeEventListener。

2。

我见过其他解决方案用isMounted包装处理程序:

if (this.isMounted) {
    const node = ReactDOM.findDOMNode(this);
}

但是 isMounted已过时并发出警告。 It is considered an antipattern。

3。

当前的破解方法是创建自己的 isMounted。就像是:

componentDidMount() {
    this.mounted = true;
    document.addEventListener('click', this.handleClick)
}

componentWillUnmount() {
    this.mounted = false;
    document.removeEventListener('click', this.handleClick)
}

handleClick() {
    if (this.mounted) {
        const node = ReactDOM.findDOMNode(this);
    }
}

但这只能绕过 isMounted控制台警告。