React event listener function not called

Question

I'm trying to add an event listener to a SVG path in a React component. I followed a previous Stack Overflow answer (How to access SVG elements with Javascript) that used an anonymous function, and that worked fine. When I tried to set the callback to a function defined inside the React component class, as in this Stack Overflow answer (ReactJS - Add custom event listener to component), the function is not called. Interestingly, if I make a reference to the function in the componentWillMount and use the reference, it works.

import React, { Component } from "react";

export default class ProcessMap extends Component {

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

    componentDidMount(){
        const t = this.hover;
        let svg = document.getElementById("drawing-svg");
        svg.addEventListener("load", function() {
            let svgDoc = svg.contentDocument;
            let path1 = svgDoc.getElementById("path3372");
            //path1.addEventListener("click", this.hover, false); // this did not work
            path1.addEventListener("click", t, false); // this works
        });
    }

    hover() {
        console.log("hover");
    }

    render() {
        return (
            <div>
                <object id="drawing-svg" width="300" height="400" type="image/svg+xml" data="images/drawing.svg"></object>
            </div>
        );
    }
};

this inside componentDidMount is different from this inside the function called on the event. — Sami Kuhmonen
– Sami Kuhmonen, Commented Nov 22, 2017 at 18:25

Twyx · Accepted Answer · 2018-11-08 22:04:20Z

3

It isn't working since you are trying to use this inside a new regular function(), where this isn't the React component anymore.

ES6 SOLUTION

Replace

componentDidMount(){
    const t = this.hover;
    let svg = document.getElementById("drawing-svg");
    svg.addEventListener("load", function() {
        let svgDoc = svg.contentDocument;
        let path1 = svgDoc.getElementById("path3372");
        //path1.addEventListener("click", this.hover, false); // this did not work
        path1.addEventListener("click", t, false); // this works
    });
}

with an arrow function

componentDidMount(){
    const t = this.hover;
    let svg = document.getElementById("drawing-svg");
    svg.addEventListener("load", () => {
        let svgDoc = svg.contentDocument;
        let path1 = svgDoc.getElementById("path3372");
        path1.addEventListener("click", this.hover, false);
    });
}

ES5 SOLUTION

If you can't use ES6, then you can either keep track of this by storing it in a variable:

componentDidMount(){
    const t = this.hover;
    let svg = document.getElementById("drawing-svg");
    var that = this;
    svg.addEventListener("load", function() {
        let svgDoc = svg.contentDocument;
        let path1 = svgDoc.getElementById("path3372");
        path1.addEventListener("click", that.hover, false);
    });
}

Or use .bind():

componentDidMount(){
    const t = this.hover;
    let svg = document.getElementById("drawing-svg");
    svg.addEventListener("load", (function() {
        let svgDoc = svg.contentDocument;
        let path1 = svgDoc.getElementById("path3372");
        path1.addEventListener("click", this.hover, false);
    }).bind(this));
}

edited Nov 8, 2018 at 22:04

Twyx

7398 silver badges17 bronze badges

answered Nov 22, 2017 at 18:26

Maluen

1,87113 silver badges17 bronze badges

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

2 Comments

BrentJM Over a year ago

Thanks, all the solutions worked perfectly. A little embarrassed that I couldn't get it. Thank you again.

putvande Over a year ago

The way OP did it works too, just the line that is commented out doesn't. So don't think he actually needs to replace anything.

Collectives™ on Stack Overflow

React event listener function not called

1 Answer 1

ES6 SOLUTION

ES5 SOLUTION

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ES6 SOLUTION

ES5 SOLUTION

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related