React 应用程序中的 addEventListener 不起作用

Question

一些背景： 我正在尝试在 React 应用程序中使用自定义 Web 组件并尝试侦听来自 Web 组件的事件。我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件。

IE

<custom-button onClick={this.clickHandler}></custom-button>.  

我试过这个，但没有用。

问题： 所以，我正在尝试通过addEventListener监听事件，就像在 vanilla js 中所做的那样，但事件处理程序永远不会被调用。

下面是一个例子。我知道<button/>这不是自定义 Web 组件，但它说明了问题：

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.buttonRef = React.createRef();
  }
  componentDidMount() {
    // there are no errors attaching the handler
    this.buttonRef.current.addEventListener("onClick", e => {
      // this point is never reached
      debugger;
      console.log("onClick", e);
    });
  }
  render() {
    return <button ref={this.buttonRef}>click me</button>;
  }
}

export default App;

任何帮助，将不胜感激。

Answer 1

该事件被称为click，而不是onClick。