我正在嘗試將球移動到滑鼠點擊的位置。該功能正在記錄 X 和 Y，但不移動球。我在這里想念什么？
打字稿反應組件
const PlayArea = () => {
let top = 'inherit';
let left = 'inherit';
document.addEventListener("click", function(e){
console.log((e.clientX 25) 'px')
top = (e.clientY - 25) "px";
console.log(top)
left = e.clientX - 25 "px";
});
return (
<>
<div className="ball" style={{ transform: `top ${top}, left ${left}` }}></div>
</>
);
};
export default PlayArea;
css
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #0b8027;
position:absolute;
}
uj5u.com熱心網友回復：
將您的top和left變數設定為狀態物件并在您的點擊事件回呼中更新它們。
const [mouse, setMouse] = useState({})
useEffect(() => {
const event = (e) => {
setMouse({ top: `${e.clientY - 25}px`, left: `${e.clientX - 25}px`
}
document.addEventListener("click", event);
});
return () => document.removeEventListener("click", event)
}, [])
return (
<>
<div className="ball" style={{ top: mouse?.top, left: mouse?.left }}></div>
</>
);
您不需要transform您的top和left樣式屬性。您直接設定它們，元素position將允許它移動到您給它的位置。
最好在組件掛載時添加事件偵聽器，并在使用 useEffect 和清理功能卸載組件時將其洗掉。
uj5u.com熱心網友回復：
為了重新渲染組件，您需要使用狀態。在如下狀態中宣告您的 top 和 left 變數，并在安裝組件后添加 enent 偵聽器。
import { useEffect, useState } from 'react';
const PlayArea = () => {
const [state, setState] = useState({
left: 'inherit',
top: 'inherit',
});
useEffect(() => {
document.addEventListener('click', (e) => {
setState({ left: `${e.clientX - 25}px`, top: `${e.clientY - 25}px` });
});
}, []);
return (
<>
<div className="ball" style={{ transform: `top ${state.top}, left ${state.left}` }} />
</>
);
};
export default PlayArea;
當您將事件偵聽器添加到檔案物件時，您需要擁有 ，position: fixed除非您對已創建的 div 有相對類。
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #0b8027;
position:fixed;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437215.html
標籤：javascript css 反应 打字稿
上一篇：用戶控制元件。找不到目標元素的管理FrameworkElement或FrameworkContentElement