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>
);
}
}
我有一个 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>
);
}
}