Реакция: как получить доступ к функции компонента из события click на границе vis.js?

Question

У меня есть реактивный компонент, например:

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

График создается с помощью response-graph-vis.

Я хочу сделать событие selectEdge для обработки: откройте диалог для этого edge_id.

У события есть идентификатор края, но как я могу получить доступ к функции _openDialog?

Я попробовал это, но здесь это означает объект 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>
    );
  }
}