React：如何從vis.js edge的click事件訪問組件功能？

Question

我有一個React組件，例如：

export default class App extends Component {
  // ...

  _openDialog = () => {
    this.setState({ isDialogOpen: true });
  };

  render() {
    return (
      <div>
        <div className="tree_graph_div">
          <Graph
            graph={graph}
            events={{
              selectEdge: function(event) {
                var { nodes, edges } = event;
                if (edges.length == 1) {
                  //I want to access _openDialog here with edge id
                }
              }
            }}
          />
        </div>
        <div>
          <Dialog />
        </div>
      </div>
    );
  }
}

該圖是使用react-graph-vis創建的。

我想讓selectEdge事件處理：打開此edge_id的對話框。

該事件具有邊緣ID，但是如何訪問函數_openDialog？

我試過了，但是這里代表Graph對象，而不是App。

謝謝

---

我嘗試使用箭頭功能將Graph更改為此：

<Graph graph={graph}
  events={{
    selectEdge: (event) => {
      debugger;
    }
  }}
/>

但是通過在調試器點停止，“ this”沒有函數_openDialog。

Answer 1

您可以更改賦予功能selectEdge為箭頭的功能使用封閉詞匯范圍，相反，它有_openDialog在this 。

export default class App extends Component {
  // ...

  render() {
    return (
      <div>
        <div className="tree_graph_div">
          <Graph
            graph={graph}
            events={{
              selectEdge: (event) => {
                var { nodes, edges } = event;
                if (edges.length == 1) {
                  this._openDialog(edges);
                }
              }
            }}
          />
        </div>
        <div>
          <Dialog />
        </div>
      </div>
    );
  }
}