Access props and state of current component in React JS within an event handler

Question

我将 Highcharts.js 与 React.js 结合使用。当用户单击 Highcharts 中的一个点时，我想重新渲染视图。为此，我需要访问click handler 中的 props 变量。通常，我只会this.props用来更新道具，但这在事件处理程序中不起作用。因此，如何将当前组件作为事件处理程序中的变量访问，以便我可以访问其道具？有没有更好的方法来做我想做的事情？

我config的 HighCharts 变量看起来像这样。澄清一下，这段代码来自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);
              }
          }
    };

你有很多选择，类似的东西应该有效。