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

IT技术 javascript reactjs web-component
2021-05-02 20:29:40

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

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;

任何帮助，将不胜感激。

4个回答

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

您不需要使用 aneventListener来执行此操作。在 中ReactJS，您可以使用 ahandler按钮，如下所示：

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;

查看ReactJS 处理事件文档。

您在这里混合了两个功能， 按钮只会对 onClick 事件做出react，而您的 ref 只会在点击 ref 而不是点击时对“click”做出react。因此该按钮目前没有任何功能。

从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>
  );
}

这是您问题的解决方案。希望是正确的解决方案。

还 <button onClick={this.onClick}>click me</button>

可以写成： <button onClick={e => this.onClick({e, ...})}>click me</button>

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

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

请注意...里面需要一key => value对。

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>;
  }
}

也尽量不要使用 React 引用，除非你真的需要。它们不打算在 React 的核心功能之外使用。

其它你可能感兴趣的问题
上一篇React Hook Form 与 A​​ntD 样式 下一篇无法构建“WebSocket”：URL“[object Object]”无效