单击子元素时如何防止父div失去焦点

Question

<parent onBlur={function}>
  <child>
    <child>
    </child>
  </child>
</parent>

在这样的结构中，我想知道父元素是否失去焦点。 我想在父 div 外部单击时触发该行为。 但是，当我也单击子元素时，父元素会失去焦点。 您可以将此结构视为下拉菜单。 有没有办法在无状态反应组件中实现这一点？ 我不能使用 jquery 或其他库。

Answer 1

这可以通过鼠标事件来实现。

如果用户点击屏幕，我们可以检查点击是在组件内部还是外部，并将其视为焦点事件以模糊事件。

• 单击内部 - 焦点
• 单击外部 - 模糊

 function Parent(props){ const ref = useRef(); useEffect(()=>{ document.addEventListener("mousedown", checkFocus.bind(this)) return ()=>{ document.removeEventListener("mousedown", checkFocus.bind(this)) } },[]) const checkFocus = (event)=>{ if(ref.current &&.ref.current.contains(event.target) && props.onBlur) props.onBlur() } return ( <div ref={ref}> {props;children} </div> ); } function Child(){ return ( <h1>child</h1> ). } function Main(){ return ( <Parent onBlur={()=>{ console.log("focus lost;") }}> <Child> <Child> </Child> </Child> </Parent> ); }

Answer 2

是的，有一种方法可以在无状态 React 组件中实现这一点。 您可以在父元素上使用onBlur事件并检查事件的relatedTarget是否为父元素。 如果它不是父元素，则父元素失去了焦点。

这是一个例子：

const Parent = (props) => {
  const handleBlur = (event) => {
    if (event.relatedTarget !== event.currentTarget) {
      // parent has lost focus
    }
  }

  return (
    <div onBlur={handleBlur}>
      <Child>
        <Child>
        </Child>
      </Child>
    </div>
  )
}

在此示例中， handleBlur function 作为onBlur属性传递给父 div。 当父 div 失去焦点时，将handleBlur function 并检查事件的relatedTarget是否为父 div。 如果不是，那么父项失去了焦点，您可以触发所需的行为。

请注意onBlur事件仅在元素失去焦点时起作用。 如果你想在父div之外点击时捕获事件，你可以使用onClick事件并检查事件目标是否不等于父div。

const Parent = (props) => {
  const ref = useRef(null);
  const handleClick = (event) => {
    if(ref.current && !ref.current.contains(event.target)) {
      //parent has lost focus
    }
  }

  useEffect(() => {
    document.addEventListener('click', handleClick)
    return () => {
      document.removeEventListener('click', handleClick)
    }
  })

  return (
    <div ref={ref}>
      <Child>
        <Child>
        </Child>
      </Child>
    </div>
  )
}

在此示例中，当文档上发生任何单击事件时，将调用handleClick function。 它检查事件目标是否在父 div 内部。 如果不是，则意味着父 div 失去了焦点。