How to make click event handler functions with TypeScript

Question

I'm trying to add an event listener for clicks but it's saying that classList doesn't exist on type EventTarget.

class UIModal extends React.Component<Props> {
    handleClick = (e: Event) => {
        if ((e.target as EventTarget).classList.contains('modal-mask')) {
            this.props.close();
        }
    }

    componentDidMount() {
        window.addEventListener('click', this.handleClick);
    }

    componentWillUnmount() {
        window.removeEventListener('click', this.handleClick);
    }

    render() {
        return (
            <div className="modal-mask">
                <div className="modal">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

Improved solution todo - rjzaworski.com/2018/10/typescript-event-handlers — Osman Ali
– Osman Ali, Commented Feb 26, 2019 at 18:57

Piotr Szlagura · Accepted Answer · 2019-02-11 06:17:24Z

2

Maybe you should try e.target as Element?

answered Feb 11, 2019 at 6:17

Piotr Szlagura

6725 silver badges18 bronze badges

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

Comments

Josh Pittman · Accepted Answer · 2019-02-11 07:09:26Z

0

e.target should be e.currentTarget

There's a bit of a discussion about this here https://github.com/Microsoft/TypeScript/issues/299

answered Feb 11, 2019 at 7:09

Josh Pittman

7,3748 gold badges45 silver badges68 bronze badges

1 Comment

Noitidart Over a year ago

It should be target unless if he's doing event delegation (ie: attaching handler to a top level div, and wanting to work with the element that triggered it) (currentTarget will be the element that listener was attached to)

Collectives™ on Stack Overflow

How to make click event handler functions with TypeScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related