在 ReactJs 中的子 div 外部单击时隐藏 div

Question

在子 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> ); }

Answer 1

一种方法是在单击时获取鼠标 cursor 坐标（使用事件） ，然后仅当 cursor 位于子 div 之外并且view为 true 时才将条件语句添加到setView为false 。

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