React:如何从 vis.js 边上的点击事件访问组件功能?

React: how to access component function from a click event on vis.js edge?

我有一个 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}
  events={{
    selectEdge: (event) => {
      debugger;
    }
  }}
/>

但是在调试器点停止,"this" 没有函数 _openDialog。

您可以将提供给 selectEdge 的函数更改为箭头函数以使用封闭的词法作用域,它在 this 上具有 _openDialog

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