将本机事件处理程序附加到 React 组件

Question

在我的应用程序中，我希望不使用 React 自己的事件系统。根据文档：

如果您发现出于某种原因需要基础浏览器事件，只需使用 nativeEvent 属性即可获取它。

但是，以下内容不起作用并返回错误。

// onclick is DOM native event-handler; React's alternative is onClick
<div id = "main" onclick = {( e ) => this.onclickHandler( e )}...
// console error: Unknown event handler property onclick...

编辑：

我知道我可以按照以下思路做一些事情，但是，我想知道为什么上述方法不起作用。以下通过addEventListener绑定处理程序的方法是唯一的方法吗？

componentDidMount(){
  window.addEventListener("click", this.handleblahblah);
  ...
}
handleblahblah(){
...
}

Answer 1

想了想，我才意识到自己的错误。如果其他人对此感到疑惑，这就是上述onclick绑定不起作用的原因。

React Components are not the same as DOM elements.

在上面的代码中，我们将方法的绑定委托给 React。React 无法识别 onclick，这是一个用于处理click事件的 DOM 关键字。

上述解决方案（使用 addEventListener）的替代方案可能是通过 React 的 refs 方法访问该元素。 refs使您可以访问底层 DOM 元素。然后绑定onclick方法。

class exampleComponent extends Component{
...
componentDidMount(){
  this.mainInterface.onclick = (e) => this.onclickEventHandler(e);
}
render(){
...
  <div id = "main" refs = {( main ) => this.mainInterface = main }
  ...