Question

在我的应用中，我希望不使用React自己的事件系统。 As per the docs：

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

然而，以下不起作用＆amp;返回错误。

// 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 }
  ...

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

1 个答案: