英文:
I want to display a div on the mouseClick Coordinates
问题
这个div
实际上是一个模态框,我正在使用tailwind CSS来创建它。
我想要这些像素值。
英文:
The div is actually a modal, I am using tailwind CSS with this
<div className={( displayModal ? 'block' : 'hidden' ) + ` w-screen h-screen absolute top-${hereIWantToPlaceXValueInPx} left=${hereIWantToPlaceYInPx} z-20 grid`}>
</div>
I want these pixel values
答案1
得分: 1
你需要捕获点击事件,然后从事件体中获取必要的坐标,根据你的实现,这些坐标可能是screenX
和screenY
,或者是clientY
和clientX
:
const [position, setPosition] = useState({});
useEffect(() => {
const handleClick = (event) => {
// 或者使用 event.clientY 和 event.clientX
setPosition({
x: event.screenX,
y: event.screenY,
});
};
window.addEventListener("click", handleClick);
return () => {
window.removeEventListener("click", handleClick);
};
}, []);
英文:
You need to capture the click event and then get the necessary coordinates from the event body, depending on your implementation, these are either screenX
and screenY
or clientY
and clientX
:
const [position, setPosition] = useState({});
useEffect(() => {
const handleClick = (event) => {
// or event.clientY and event.clientX
setPosition({
x: event.screenX,
y: event.screenY,
});
};
window.addEventListener("click", handleClick);
return () => {
window.removeEventListener("click", handleClick);
};
}, []);
答案2
得分: 1
你可以将鼠标位置存储在状态中作为一个对象,然后在返回你的 JSX
时使用它。
这个想法很简单,你可以有一个名为 mousePos
的状态,例如,初始化为 {x: 0, y: 0}
(或适合你的任何值),然后监听 window
上的点击事件来更新你的状态,你可以直接用它来更改你的 className
字符串中的值。
const MyComponent = props => {
const [mousePos, setMousePos] = useState({
x: 0,
y: 0
});
useEffect(() => {
// 更新位置状态变量的点击处理程序
const clickHandler = e => setMousePos({
x: event.clientX,
y: event.clientY,
});
// 监听窗口上的点击事件
window.addEventListener('click', clickHandler);
// 在卸载时简单地移除点击监听器
return () => window.removeEventListener('click', clickHandler);
}, []);
return (
<div className={`${props.displayModal ? 'block' : 'hidden'} w-screen h-screen absolute top-${mousePos.x} left=${mousePos.y} z-20 grid`}>
我是一个模型!
</div>;
);
}
export default MyComponent;
你还可以创建一个自定义钩子,允许你在任何需要的组件中获取鼠标位置,类似于:
export default function useMousePosition() {
const [mousePos, setMousePos] = useState({
x: 0,
y: 0
});
useEffect(() => {
const clickHandler = e => setMousePos({
x: event.clientX,
y: event.clientY,
});
window.addEventListener('click', clickHandler);
return () => window.removeEventListener('click', clickHandler);
}, []);
return mousePos;
}
// 然后在你的组件中如下使用它
// const mousePos = useMousePos();
英文:
You could store the mouse position in the state as an object and then use it when you return your JSX
.
The idea is simple, you'll have a state named, for example, mousePos
that is an object initialized as {x: 0, y: 0}
(or whatever suits you) then you listen for the click event on the window
to update your state which you can use to directly change the values in your className
string.
const MyComponent = props => {
const [mousePos, setMousePos] = useState({
x: 0,
y: 0
});
useEffect(() => {
// the click handler that updates the position state variable
const clickHandler = e => setMousePos({
x: event.clientX,
y: event.clientY,
});
// listen for the click event on the window
window.addEventListener('click', clickHandler);
// on unmount simply remove the click listener
return () => window.removeEventListener('click', clickHandler);
}, []);
return (
<div className = {`${props.displayModal ? 'block' : 'hidden'} w-screen h-screen absolute top-${mousePos.x} left=${mousePos.y} z-20 grid`}>
I Am a model!
</div>;
);
}
export default MyComponent;
You might also create a custom hook that allows you to get the mouse position on any component you need, something like:
export default function useMousePosition() {
const [mousePos, setMousePos] = useState({
x: 0,
y: 0
});
useEffect(() => {
const clickHandler = e => setMousePos({
x: event.clientX,
y: event.clientY,
});
window.addEventListener('click', clickHandler);
return () => window.removeEventListener('click', clickHandler);
}, []);
return mousePos;
}
// then use it as follow in your components
// const mousePos = useMousePos();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论