Не запускать OnClick для вложенных дочерних элементов

Question

у меня есть простой компонент модального:

function Modal(props) { 
    return (
    <div className={cx(styles.overlay, { show: props.show })} onClick={props.onClose}> 
     <div className={styles.modal}> 
     <span className={styles.closeBtn} onClick={props.onClose} /> 
     {props.children} 
     </div> 
    </div> 
) 
} 

OnClose опора вызывает закрытие модального, поэтому я придаю его styles.overlay (темную накладке, что вы обычно видите на модальностях, что когда щелкнул ее, и styles.closeBtn (кнопка закрытия для модального).

Весь поток работает, кроме того, что что-либо внутри styles.overlay при нажатии на него также отклоняет модальный, что не является функциональностью, с которой я работал, поэтому мне нужно только отклонить его, если этот конкретный элемент щелкнут не его дочерними элементами.

Answer 1

function Modal(props) { 
    return (
    <div className={cx(styles.overlay, { show: props.show })} onClick= {props.onClose}> 
     <div className={styles.modal} onClick={e => e.preventDefault()}> 
     <span className={styles.closeBtn} onClick={props.onClose} /> 
     {props.children} 
     </div> 
    </div> 
    ) 
} 

Я думаю, что лучший способ состоит в том, чтобы ваш накладной и ваш модальный в двух отдельных div, но это должно работать.

Answer 2

Добавить onClick(e)={e.stopPropagation();} в обработчик кликов модального диалога; это должно препятствовать распространению на оверлей.

Надеюсь, что это сработает! Удачи!