React钩子onClick仅针对父级触发（模态）

Question

I have a modal window and i want it to hide if user clicked on modal itself(black background), but click is trigerring by clildrens to. Here is the example:

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

export function Modal({ show, children }) {
  return (
    <DivModal show={show}>
      {children}
    </DivModal>
  )
}

const DivModal = styled.div`
  display: ${props => (props.show ? 'block' : 'none')};
`

How to fire event's only for modal itself?

Answer 1

Ehh, this work, but if you click on wraper div - modal will not hide :(

After some googling ant try, found a way. Key point is that you need to stop onClick event propagation from parent to childrens. In my case i just wrapped my component by div with onClick={e => e.stopPropagation()}.

import React from 'react'
import styled from 'styled-components'

export function Modal({ show, showModalSet, children }) {
  return (
    <DivModal onClick={() => showModalSet(false)} show={show}>
      <div onClick={e => e.stopPropagation()}>{children}</div>
    </DivModal>
  )
}

const DivModal = styled.div`
   position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: ${({ show }) => (show ? 'block' : 'none')};
  z-index: 10;
  overflow-y: scroll;
`

Component use:

<Modal show={showModal} showModalSet={showModalSetFunctionInUsePlace}>

Answer 2

Another approach, that i'am happy now with is to use refs and compare what component was clicked:

import React, { useRef } from 'react'
import styled from 'styled-components'

export function Modal({ show, showModalSet, children }) {
  const modalRef = useRef(null)

  function handleClick(e) {
    if (e.target == modalRef.current) showModalSet(false)
  }

  return (
    <DivModal onClick={handleClick} show={show} ref={modalRef}>
      {children}
    </DivModal>
  )
}

const DivModal = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: ${({ show }) => (show ? 'block' : 'none')};
  z-index: 10;
  overflow-y: scroll;
`