CODEWITHSUNDEEP
reactjs
user6329530
user6329530

Reputation: 734

Bind a function in parent to a mouse event in child in react (hooks)

I am trying to learn how to bind functions in reactjs to events set in child. The one canvas (canvas2) has a mouse move event and the other canvas (canvas1) shall receive data from that event when there is any (=mouse moves).

But none of the functions are called and console.log doesn't show up.

Parent App.js

const [move, setMove] = useState();

const handleMove = (e) => {
    console.log(e); //shows nothing
    setMove(e.target);
}

return(
<>
    <Canvas1 move={move} />
    <Canvas2 handleMove={handleMove} />
</>
);

Canvas1:

useEffect(() => {
    console.log(props.move); //shows nothing
}, [props.move]); //when props.move has new data, I wand this to trigger

Canvas2:

const [canvas, setCanvas] = useState();

useEffect(() => {
    if(!canvas) {
        setCanvas(initCanvas());
        return;
    }

    canvas.on("mouse:move", props.handleMove); //bind mouse event to parent function
}, [canvas]);

return(
    <canvas></canvas>
);

Upvotes: 2

Views: 840

Answers (1)

seongkuk han
seongkuk han

Reputation: 740

Canvas1

Could you try to change move and then check the message. (Anything has to be shown up in the console in this way) 

useEffect(() => {
    console.log(props.move); //shows nothing
}, [props.move]); //when props.move has new data, I wand this to trigger

Canvas2

Could you try this below? and then let me know what message comes up.

const [canvas, setCanvas] = useState();

useEffect(() => {
    console.log(canvas);

    if(!canvas) {
        setCanvas(initCanvas()); // This set up a size of the canvas, doesn't this?
        return;
    }

    // canvas.on("mouse:move", props.handleMove); //bind mouse event to parent function
    canvas.addEventListener("mousemove", props.handleMove);
}, [canvas]);

return(
    <canvas></canvas>
);

I'm not sure about this... If you get messages from the code, let me know. I'm trying to find out what problems are

=========================

-EDITED-

[App.js]

import React, { useState } from "react";
import Canvas1 from "./components/Canvas1";
import Canvas2 from "./components/Canvas2";

function App() {
  const [move, setMove] = useState();

  const handleMove = e => {
    setMove(e.target);
  };

  return (
    <>
      <Canvas1 move={move} />
      <Canvas2 handleMove={handleMove} />
    </>
  );
}

export default App;

[Canvas1]

import React, { useEffect } from "react";

const Canvas1 = props => {
  useEffect(() => {
    console.log(`props.move:${props.move}`);
  }, [props.move]);

  return <></>;
};

export default Canvas1;

[Canvas2]

import React, { useEffect, useState, useRef } from "react";

const initCanvas = () => {
  const newCanvas = document.createElement("canvas");
  newCanvas.setAttribute("width", "500px");
  newCanvas.setAttribute("height", "500px");
  return newCanvas;
};

const Canvas2 = props => {
  const [canvas, setCanvas] = useState();
  const canvasRef = useRef();

  useEffect(() => {
    if (!canvas) {
      setCanvas(initCanvas());
      return;
    }
  }, [canvas]);

  useEffect(() => {
    canvasRef.current.addEventListener("mousemove", props.handleMove); // It doens't work
  }, [props.handleMove]);

  return <canvas ref={canvasRef} />;
};

export default Canvas2;

Upvotes: 2

Related Questions