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

【问题标题】：Access props and state of current component in React JS within an event handler在事件处理程序中访问 React JS 中当前组件的道具和状态
【发布时间】：2015-09-25 07:12:44
【问题描述】：

我将 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
                      }
                  }
              }
          }
      },
    };

感谢您的帮助。

【问题讨论】：

从点击事件处理程序内部触发rerender 事件不会更有意义吗？ events: { click: myRerenderFunction }
您可以调用在事件范围之上定义的函数，为您处理重新渲染。如果您将它定义在与config 变量相同的级别，它应该充当闭包并且可以在事件内部访问。我敢打赌，这不是唯一必须调用重新渲染事件的地方。
这是个好主意，但是我如何将点对象本身（e 对象，如果你愿意的话）传递给myRerenderFunction，以便我可以在自定义函数中访问它？跨度>
完全一样的方式function myRerenderFunction(e) { /* do something */ } 等一下，让它成为说明的答案。

标签： javascript highcharts reactjs

【解决方案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);
              }
          }
    };

你有很多选择，按照这些思路应该可以工作。

【讨论】：

感谢您的全面回答。我决定选择第一个选项。澄清一下，我确实必须在方法调用前加上“this”，因为 javascript 编译器无法识别该函数，所以它应该是：click: this.myRerenderfunction
那是因为您将它创建为像this.myRerenderfunction = function(e) { } 这样的方法。如果您按照上面的 #1 和 #2 将其创建为常规函数，则不需要这样做。它是一种方法并没有错，我只是在解释发生了什么。 :) developer.mozilla.org/en-US/docs/Glossary/Method

【解决方案2】：

尝试使用

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

【讨论】：