javascript - 在事件处理程序中访问 React JS 中当前组件的属性和状态

Question

我将 Highcharts.js 与 React.js 结合使用。我想在用户单击 Highcharts 中的某个点时重新呈现 View 。为此，我需要访问点击处理程序中的 props 变量。通常，我只会使用 this.props 来更新 Prop ，但这在事件处理程序中不起作用。因此，如何在事件处理程序中将当前组件作为变量访问，以便访问它的 props？有没有更好的方法来完成我想做的事情？

我的 HighCharts 的 config 变量看起来像这样。澄清一下，此代码来自同一组件的 render 函数。

var config = {
      ...
      plotOptions: {
          series: {
              cursor: 'pointer',
              point: {
                  events: {
                      click: function (event) {
                        //the `this` variable does not have props or state here
                        //`this` refers to the point object on the graph here
                      }
                  }
              }
          }
      },
    };

感谢您的帮助。

Answer 1

您可以在配置变量之外的某处定义点击处理函数，它应该可以访问事件范围之外的所有内容。

myRerenderFunction(e) { /* do something */ } // define function here...

var config = {
      ...
          events: {
              click: myRerenderFunction // ...and it's accessible since they're defined in the same scope
          }
    };

或者您可以将重新呈现本身放在点击处理程序之外。

myRerenderFunction(e) { /* do something */ } // This is now a closure...

var config = {
      ...
          events: {
              click: function(e) {
                  /* Do something with the event */
                  myRerenderFunction(e); // ...which means you can access it from inside the click handler function
              }
          }
    };

或者您可以将当前的 this 存储为一个闭包。

var whateverScopeThisIs = this;

var config = {
      ...
          events: {
              click: function(e) {
                  /* Do something with the event */
                  whateverScopeThisIs.doSomething(e);
              }
          }
    };

您有很多选择，按照这些思路应该可行。