Question

我有新的反应。我需要在单击d3js组件时调用react js函数。

我在反应组件中有一个d3js条形图。在同一个组件中我有这个方法：

handleClick: function(data){
    this.props.onClick(data);
},

点击d3js时需要调用此函数：

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", function(d) {
    this.handleClick(); // my react method
   })

但这不起作用。我在chrome中的输出是：

this.handleClick is not a function

出了什么问题？

Answer 1

当在匿名函数中引用时，这不会引用您的react-component。实际上，这是指由click处理程序创建的上下文。

这是一个常见的javascript误解。在另一个函数中访问特定“this”变量的常用方法是将该函数绑定到特定的this-object。

var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", function(d) {
    this.handleClick(); // my react method
}.bind(this) )

另一种方法是将“this”绑定到外部变量，然后在其他函数中使用该变量。通常，人们将这个变量称为“自我”或“那个”。

var that = this;
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", function(d) {
    that.handleClick(); // my react method
} )

有关此内容及其工作原理的更多信息， https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

如果您使用的是 ES6 ，只需使用箭头功能，箭头函数不会使词汇包装器在使用D3和React时导致此问题，所以只需执行：

const g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)
  .on("click", d => {
     this.handleClick(); // my react method
})

在d3js事件上执行React js函数

2 个答案: