addEventListener в приложении React не работает

Question

Немного предыстории: Я пытаюсь использовать пользовательский веб-компонент в приложении реакции и пытаюсь прослушивать события из веб-компонента.Я полагаю, что вы не можете просто обрабатывать события обычным способом реакции на пользовательском веб-компоненте.

т.е.

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

Я пробовал это, и это не сработало.

Проблема: Итак, я пытаюсь прослушать событие через addEventListener , как вы это делали бы в vanilla js, но обработчик событий никогда не вызывался.

Пример этого ниже.Я знаю, что <button/> не является пользовательским веб-компонентом, но он демонстрирует проблему:

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

Это решение вашей проблемы.Надежда - правильное решение.

Также <button onClick={this.onClick}>click me</button>

можно записать как: <button onClick={e => this.onClick({e, ...})}>click me</button>

, чтобы иметь доступ к пользовательским реквизитам, которые вы хотите передать своей кнопке.Слушатель событий.В этой ситуации ваш прослушиватель событий должен выглядеть следующим образом:

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 References, если только вам это не нужно.Они не предназначены для использования вне основных функций React.

Answer 2

Вам не нужно использовать eventListener, чтобы сделать это.В ReactJS вы можете использовать handler для кнопки, например:

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 Обработка событий .

Answer 3

Вы смешиваете две функции здесь, кнопка будет реагировать только на события onClick, а ваш реф будет реагировать на 'click' только в том случае, если ссылка нажата, а это не так.Таким образом, кнопка в настоящее время не имеет никакой функциональности.

От реагирующего документа:

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

Answer 4

Событие называется click, а не onClick.