javascript addEventListener in react js component not working

Question

At first run the program is working correctly. But after clicking on the sum or minus button the function will not run.

componentDidMount() {

if(CONST.INTRO) {

    this.showIntro(); // show popup with next and prev btn

    let plus = document.querySelector('.introStep-plus');
    let minus = document.querySelector('.introStep-minus');

    if (plus || minus) {

        plus.addEventListener('click',  () => {
            let next = document.querySelector(CONST.INTRO[this.state.introStep].element);
            if (next) {
                next.parentNode.removeChild(next);
            }

            this.setState({
                introStep: this.state.introStep + 1
            });

            this.showIntro();


        });
    }
}

ROOT · Accepted Answer · 2020-01-05 09:29:40Z

As referenced in React documentation: refs and the dom the proper way to reference DOM elements is by using react.creatRef() method, and even with this the documentation suggest to not over use it:

Avoid using refs for anything that can be done declaratively.

I suggest that you manage your .introStep-plus and introStep-minus DOM element in your react components render method, with conditional rendering, and maintain a state to show and hide .introStep-plus DOM element instead of removing it inside native javascript addEventListener click

Here is a suggested modification, it might not work directly since you didn't provide more context and how you implemented the whole component.

constructor() {
  ...
  this.state = {
    ...
    showNext: 1,
    ...
  }
  ...

  this.handlePlusClick = this.handlePlusClick.bind(this);
}

componentDidMount() {
  if(CONST.INTRO) {
      this.showIntro(); // show popup with next and prev btn
  }
}

handlePlusClick(e) {
  this.setState({
      introStep: this.state.introStep + 1,
      showNext: 0,
  });
  this.showIntro();
});

render() {
  ...
  <div className="introStep-plus" onClick={this.handlePlusClick}></div>
  <div className="introStep-minus"></div>
  {(this.stat.showNext) ? (<div> NEXT </div>) : <React.fragment />}
  ...
}

Collectives™ on Stack Overflow

javascript addEventListener in react js component not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related