Как корректно обработать клик вне компонента в react js?

Question

[lexstile]

Текущий код:

componentWillMount() {
    document.addEventListener('click', this.onClickOuterModal, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClickOuterModal, false);
  }

  onClickOuterModal = (event) => {
    const modal = document.getElementsByClassName('modal');
    if (modal !== event.target) {
      this.props.closeModal();
    }
  };

1. Можно ли обработать как-то элегантнее и нужно ли это делать?
2. Как сделать проверку еще и по клику на дочерние элементы компонента? (сейчас по клику внутри модального окна оно закрывается - не должно).

Answer 1

[Антон Спирин]

if (!modal.contains(event.target)) {
  this.props.closeModal();
}

Элемент по-хорошему получать через ref.

Comments

[lexstile]

Ни разу с рефами не работал, подскажете? - как обойти данное недоразумение?

[Антон Спирин]

lexstile, элемент с новым ref API получают как:
const modal = this.myRef.current;

Accessing refs

[lexstile]

Антон Спирин, все верно, я просто начал пробовать по-разному, но ошибка осталась

[Антон Спирин]

lexstile, вы получаете ref компонента React, а вам нужен ref DOM элемента. Того на котором у вас класс 'modal'.

[lexstile]

Антон Спирин, точно. Спасибо!

Answer 2

[kova1ev]

нужно юзать порталы