javascript - 如何在函数中用 this 指向 React 组件？

Question

我正在尝试创建一个集成了 D3.js 和 React 的填充计。首先，请看一下我下面的代码:

componentDidMount() {
  renderOuterGauge();
  renderInnerGauge();
}

componentDidUpdate() {
  renderOuterGauge();
}

renderInnerGauge = () => {
  const innerGauge = this.svg.append('path')
    .attr('transform', 'translate(60,100)')
    .attr('stroke', 'transparent')
    .attr('d', 'M0,0 l440,-60 v100 h-440 v-40')
    .on('click', function(d) {
      const x = d3.mouse(this)[0];
      const yUP = x / (440 / -60);
      const score = x / 4.38;
      console.log(score);
      this.setState({
        score: score
      })
      d3.event.this.setAttribute('d', `M0,0 l${x},${yUP} v${yUP+40} h${-x} v-40`);
      d3.event.this.setAttribute('fill', 'forestgreen');
    })
}

如上所示，我尝试使用 this.setState 方法动态填充内部仪表，但由于方法调用位于闭包中，因此我无法使用 setState在此上。

通常我可以使用箭头函数定义来解决此问题，但据我所知，为了使用 d3.mouse 获取 x 和 y 值(this) 在仪表中，我无法使用箭头功能。对于这种情况，有没有办法将 this 指向 react 组件并在同一函数中使用鼠标方法？

Answer 1

你的意思是这样的吗？只需在进入闭包之前将 this 指向一个变量即可。

renderInnerGauge = () => {

    const self = this

    const innerGauge = this.svg.append('path')
            .attr('transform','translate(60,100)')
            .attr('stroke','transparent')
            .attr('d','M0,0 l440,-60 v100 h-440 v-40')
            .on('click', function(d){
                const x = d3.mouse(this)[0];
                const yUP = x/(440/-60);
                const score = x/4.38;
                console.log(score);

                // Changed to 'self'
                self.setState({
                    score: score
                })
                d3.event.this.setAttribute('d',`M0,0 l${x},${yUP} v${yUP+40} h${-x} v-40`);
                d3.event.this.setAttribute('fill','forestgreen');
            }) 

    }