Question

我在 React Single Page Application 中使用 mxGraph ，并在 componentDidMount 中实例化了新的 mxKeyHandler 。我还要在 componentWillUnmount 中调用其 destroy 方法。第一次访问具有 mxGraph 组件的页面时，一切都很好，但是，如果我导航到其他页面并返回（没有页面刷新），它将不再起作用。

componentDidMount() {
    this.editor = new mxEditor();
    this.editor.setGraphContainer(this.mxGraphRef.current);
    ...... 
    this.keyHandler = new mxKeyHandler(this.editor.graph);
    this.keyHandler.bindKey(46, evt => {
      this.editor.graph.removeCells();
    });
}

componentWillUnmount() {
    this.keyHandler.destroy();
    this.editor.destroy();
}

关于我在做什么错的任何建议？

Answer 1

好的，解决方案是添加以下两行：

this.editor.graph.container.setAttribute('tabindex', '-1');
this.editor.graph.container.focus();

如此处所述：https://jgraph.github.io/mxgraph/docs/known-issues.html#Focus

重新安装React组件时mxKeyHandler不起作用

1 个答案: