Question

我将Highcharts.js与React.js结合使用。我想在用户点击Highcharts中的一个点时重新渲染视图。为此，我需要在点击处理程序中访问props变量。通常，我只会使用this.props更新道具，但这不会在事件处理程序中工作。因此，如何在事件处理程序中将当前组件作为变量访问，以便我可以访问其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

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

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);
              }
          }
    };

你有很多选择，这些方面应该有用。

Answer 2

尝试使用

events: {
   click: function (event) {
       window.ReactNativeWebView.postMessage(event)
   }
}

在事件处理程序中访问React JS中的道具和当前组件的状态

2 个答案: