how to remove event listener from document in reactjs [duplicate]

Question

I am a beginner in React and I have some problems. I want to add some event listeners in componentDidMount() method, plus I need to catch the event to find which key was clicked. And I want to remove it in componentWillUnmount() method. I did it on with extra function. But there is some issue. After some time passes (for example after one second) I want to update state in parent component(which triggers component unmounting and I did it), but there is One problem I cant remove event listener in componentWillUnmount() so please help me.

here is my code

import React, { Component } from 'react';
class Element extends Component {

    componentDidMount(){
        const {attributes, startTime, timeOut, automaticAnswer} ={...this.props};
            document.addEventListener('keypress', function func(e){
                that.handleClick(e, startTime, attributes.keyBoardKey, false, timeOut, func)});
    }


    handleClick(event, startTime, realAnswer, automaticAnswer, timeOut, func){
        this.props.fillAnswer(event.key ? event.key : '', startTime, realAnswer, automaticAnswer, timeOut);
        document.removeEventListener('keypress', func);
    }

    render() {
        const {attributes, startTime, timeOut, automaticAnswer} ={...this.props};
        if(automaticAnswer ){
            this.handleClick('', startTime, attributes.keyBoardKey, true, timeOut);
        }


        return (
            <span className={attributes.className}>{attributes.value}</span>
        );
    }
}

export default Element;

Hello, Can you please describe which functionality you need to perform actually? — Bhumi Sukhadiya
– Bhumi Sukhadiya, Commented Oct 3, 2019 at 12:04
It's a test. Some word appear on screen written with different colors. User must press on the correct key(it'w written in description). User has 1 second to answer the question. After one second another component must appear and it shows how may of your answers was correct. Then user click "next" button and another word appears... And again and Again — Makho Gelashvili
– Makho Gelashvili, Commented Oct 3, 2019 at 12:08
There are mainly 3 events of the keyboard: keydown, keypress ,keyup. You can use anyone of it. — Bhumi Sukhadiya
– Bhumi Sukhadiya, Commented Oct 3, 2019 at 12:36

vishnu prasath · Accepted Answer · 2019-10-03 12:07:43Z

4

The below link will match ur usecase hopefully,also i guess ur qestion duplicate question This how you do it

constructor(props){
super(props);
this.onScroll = this.onScroll.bind(this);
}

componentDidMount() {
window.addEventListener('scroll', this.onScroll, false);
}

componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll, false);
}

answered Oct 3, 2019 at 12:07

vishnu prasath

1127 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Makho Gelashvili Over a year ago

I saw that. But my problem is that I can't get event in my function like that

vishnu prasath Over a year ago

any error in specific,like ur getting problem with the "this" keyword

Makho Gelashvili Over a year ago

I had very silly mistake. Thanks man!!!

Makho Gelashvili Over a year ago

your reply helped me a lot

Collectives™ on Stack Overflow

how to remove event listener from document in reactjs [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related