在 ReactJs 中的子 div 外部单击时隐藏 div
Hide div when clicked outside the child div in ReactJs
我想在子 div 外部单击时隐藏子 div。切换按钮在这种情况下也应该有效。
import React, { useState } from "react";
export default function Toggle() {
const [view, setView] = useState(false);
return (
<div style={{ height: "100vh", backgroundColor: "lightblue" }}>
<button onClick={() => setView(!view)}> show/hide </button>
<div
style={{
display: `${view ? "block" : "none"}`,
height: "20vh",
width: "10vw",
backgroundColor: "lightcoral",
}}
>
Child Div
</div>
</div>
);
}
一种方法是在单击时获取 鼠标光标坐标 (使用事件) 然后添加条件语句到 setView
到 false 仅当光标在子 div 之外并且 view
为真时。
export default function Toggle() {
const [view, setView] = useState(false);
function hide(e) {
if (e.pageX > 80 || e.pageY > 125) {
if (view) setView(false);
}
}
return (
<div
onClick={() => hide(event)}
style={{ height: "100vh", backgroundColor: "lightblue" }}
>
<button onClick={() => setView(!view)}> show/hide </button>
<div
style={{
display: `${view ? "block" : "none"}`,
height: "20vh",
width: "10vw",
backgroundColor: "lightcoral"
}}
>
Child Div
</div>
</div>
);
}
我想在子 div 外部单击时隐藏子 div。切换按钮在这种情况下也应该有效。
import React, { useState } from "react";
export default function Toggle() {
const [view, setView] = useState(false);
return (
<div style={{ height: "100vh", backgroundColor: "lightblue" }}>
<button onClick={() => setView(!view)}> show/hide </button>
<div
style={{
display: `${view ? "block" : "none"}`,
height: "20vh",
width: "10vw",
backgroundColor: "lightcoral",
}}
>
Child Div
</div>
</div>
);
}
一种方法是在单击时获取 鼠标光标坐标 (使用事件) 然后添加条件语句到 setView
到 false 仅当光标在子 div 之外并且 view
为真时。
export default function Toggle() {
const [view, setView] = useState(false);
function hide(e) {
if (e.pageX > 80 || e.pageY > 125) {
if (view) setView(false);
}
}
return (
<div
onClick={() => hide(event)}
style={{ height: "100vh", backgroundColor: "lightblue" }}
>
<button onClick={() => setView(!view)}> show/hide </button>
<div
style={{
display: `${view ? "block" : "none"}`,
height: "20vh",
width: "10vw",
backgroundColor: "lightcoral"
}}
>
Child Div
</div>
</div>
);
}