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

IT技术 javascript highcharts reactjs
2021-05-08 19:44:26

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

谢谢你的帮助。

2个回答

您可以在 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);
              }
          }
    };

你有很多选择，沿着这些路线的东西应该有效。

尝试使用

events: {
   click: function (event) {
       window.ReactNativeWebView.postMessage(event)
   }
}
其它你可能感兴趣的问题
上一篇React router v4 服务静态文件 (robot.txt) 下一篇钥匙斗篷 | 无法在异步函数中等待 updateToken()