Reactjs 将父对象中的函数绑定到react（hooks）子对象中的鼠标事件

我试图学习如何将reactjs中的函数绑定到child中设置的事件。一个画布（

canvas2

）有一个鼠标移动事件，另一个画布（

canvas1

）在有任何（=鼠标移动）时应接收来自该事件的数据

但是没有调用任何函数，并且console.log不会显示

父App.js

const [move, setMove] = useState();

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

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

游说2：

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>
);

const[canvas，setCanvas]=useState（）；
useffect（（）=>{
如果（！画布）{
setCanvas（initCanvas（））；
返回；
}
canvas.on（“mouse:move”，props.handleMove）；//将鼠标事件绑定到父函数
}，[canvas]）；
返回(
);

Canvas1 请您尝试更改

move

，然后检查信息。（任何东西都必须以这种方式显示在控制台中）

useffect（（）=>{
console.log（props.move）；//不显示任何内容
}，[props.move]）//当props.move有新数据时，我将触发此命令

游说 你能试试下面这个吗？然后让我知道出现了什么消息

const[canvas，setCanvas]=useState（）；
useffect（（）=>{
console.log（canvas）；
如果（！画布）{
setCanvas（initCanvas（））；//这设置了画布的大小，不是吗？
返回；
}
//canvas.on（“mouse:move”，props.handleMove）；//将鼠标事件绑定到父函数
canvas.addEventListener（“鼠标移动”，props.handleMove）；
}，[canvas]）；
返回(
);

我不确定这件事。。。如果你从代码中得到消息，请告诉我。我想找出问题所在

========================= -编辑-

[App.js]

import React，{useState}来自“React”；
从“/components/Canvas1”导入Canvas1；
从“/components/Canvas2”导入Canvas2；
函数App（）{
const[move，setMove]=useState（）；
常量handleMove=e=>{
setMove（即目标）；
};
返回(
);
}
导出默认应用程序；

[游说1]

import React，{useffect}来自“React”；
const Canvas1=道具=>{
useffect（（）=>{
log（`props.move:${props.move}`）；
}，[props.move]）；
返回；
};
导出默认画布1；

[拉票2]

import React，{useffect，useState，useRef}来自“React”；
const initCanvas=（）=>{
const newCanvas=document.createElement（“canvas”）；
setAttribute（“宽度”，“500px”）；
setAttribute（“高度”，“500px”）；
返回新画布；
};
const Canvas2=道具=>{
const[canvas，setCanvas]=useState（）；
const canvasRef=useRef（）；
useffect（（）=>{
如果（！画布）{
setCanvas（initCanvas（））；
返回；
}
}，[canvas]）；
useffect（（）=>{
canvasRef.current.addEventListener（“mousemove”，props.handleMove）；//它不起作用
}，[props.handleMove]）；
返回；
};
导出默认画布2；

仍然没有发生任何事情。问题在于如何将函数绑定到app.js parent，然后将绑定函数的结果绑定到canvas1。在我的代码中，会显示消息。实际上，

未定义

，因为我没有给

移动

赋值。在代码中将事件附加到画布时出现问题。无论如何，

move

已经出现。你能告诉我更多关于移动的代码吗？我想现在可以了。顺便说一下，您可以编写console.log（

props.move:${props.move}

）；也作为console.log（“props.move:，props.move”）；

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>
);