Javascript React应用程序中的addEventListener是'；行不通

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

i、 e

。

我试过这个，但没用

问题： 因此，我试图通过addEventListener监听事件，就像在vanilla js中一样，但事件处理程序从未被调用

下面是一个例子。我知道

不是自定义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;

import React，{Component}来自“React”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.buttonRef=React.createRef（）；
}
componentDidMount（）{
//附加处理程序时没有错误
this.buttonRef.current.addEventListener（“onClick”，e=>{
//这一点永远不会达到
调试器；
console.log（“onClick”，e）；
});
}
render（）{
返回点击我；
}
}
导出默认应用程序；

---

任何帮助都将不胜感激。

事件将被调用，而不是单击

onClick

您不需要使用

eventListener

来执行此操作。在

ReactJS

中，您可以对按钮使用

处理程序，如下所示：

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
  }
  btnHandler = e => {
      console.log("onClick",e)
  }
  render() {
    return <button onClick={this.btnHandler}> click me </button>
  }
} 

export default App;

import React，{Component}来自“React”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
btnHandler=e=>{
log（“onClick”，e）
}
render（）{
返回单击我
}
} 
导出默认应用程序；

看看。
您在这里混合了两种功能，
按钮只会对onClick事件做出反应，如果ref未被点击，您的ref只会对“click”做出反应。
因此，该按钮目前没有任何功能

从react文件：

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  let textInput = React.createRef();

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

功能自定义文本输入（道具）{
//textInput必须在此处声明，以便ref可以引用它
让textInput=React.createRef（）；
函数handleClick（）{
textInput.current.focus（）；
}
返回(
);
}
这是您问题的解决方案。希望是正确的解决办法

也
单击我

可以写为：
this.onClick（{e，…}）}>单击我

访问要传递给按钮事件侦听器的自定义道具。
在这种情况下，事件侦听器需要如下所示：

onClick=（e，…）=>{
//这一点永远不会达到
调试器；
console.log（“onClick”，e）；
};

请注意，
…
中需要有一对
键=>值

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  onClick = e => {
      // this point is never reached
      debugger;
      console.log("onClick", e);
  };

  render() {
    return <button onClick={this.onClick}>click me</button>;
  }
}

import React，{Component}来自“React”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
onClick=e=>{
//这一点永远不会达到
调试器；
console.log（“onClick”，e）；
};
render（）{
返回点击我；
}
}

另外，尽量不要使用React引用，除非您真的需要。它们不打算在React的核心功能之外使用。
为什么不使用按钮的
onclick
，并将处理程序传递给它呢？首先是“未捕获错误：预期
onclick
侦听器是一个函数，而得到的值是
string
type.”，现在是“未捕获引用错误：未定义btnHandler”。是我的错误，我编写了
'btnHandler'
而不是
{btnHandler}
。在代码中更改它，它应该可以工作。如果没有，请尝试
{this.btnHandler}
@xehpuk，在这里测试并运行良好。我用修复程序编辑了答案。是的，现在它正在运行。如果您不在回调中使用它，您不需要绑定此
。是的。将它更改为箭头函数。
import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  onClick = e => {
      // this point is never reached
      debugger;
      console.log("onClick", e);
  };

  render() {
    return <button onClick={this.onClick}>click me</button>;
  }
}