Реализация реализации нажатия на пустую область для закрытия указанного элемента в React

React.js

Начните с простого требования

Когда мы настраиваем всплывающий компонент, обычно требуется щелкнуть пустую область, кроме всплывающего слоя, чтобы закрыть всплывающий слой. Вы можете сказать, что это непросто, используйте механизм всплытия событий, вdocumentДобавьте событие прослушивателя, чтобы закрыть всплывающий слой, а затем предотвратите появление всплывающих окон на всплывающем слое и событие щелчка, вызывающее всплывающий слой!

Правильная поза, чтобы остановить всплытие событий в React

Хорошо, если это верно в обычных html-страницах, но вreactВ проекте вы обнаружите, что когда вы запускаете событие щелчка целевой области, вы не можете остановить всплытие, потому что вы не можете его найти.event.stopPropagation()метод. Прочитав статью, я узнал:

  • События кликов в компонентах React делегируютсяdocument, что может повысить эффективность, поэтому предотвращать всплытие непосредственно в событии клика компонента бессмысленно, в подтверждение этому можно посмотреть следующий пример кода:
class MyPomponent extends PureComponent {
  constructor(props){
    super(props)
  }
  componentDidMount() {
    document.addEventListener('click', (e) => {
      console.log(2);
    })
    document.body.addEventListener('click', (e) => {
      console.log(3);
    })
  }
  testClick(e) {
    console.log(1);
  }
  render() {
    return (
      <div onClick={(e) => this.testClick(e)}>测试组件</div>
    )
  }
}
// 会依次打印 3 1 2
  • Поскольку всплытие целевого события нельзя предотвратить напрямую, используйтеe.stopImmediatePropagation()Может события, потому что это не только предотвращает всплывающую подсказку событий, но и события по умолчанию. На самом деле, это все еще не работает, потому что вышеtestClickизeРаспечатайте его, и вы обнаружите, что его нет.stopImmediatePropagationметод, конечноstopPropagationметод, а затем запрашивать данные, чтобы узнать, что эти нативные методы размещены вnativeEventproperties, поэтому код для предотвращения всплытия в целевом событии:
// 阻止冒泡
stopBubble(event) {
    event.nativeEvent.stopImmediatePropagation() //阻止冒泡
}

последний шаг

Что ж, после того, как вышеизложенное успешно предотвратило всплытие целевого события, остальное в порядке.documentдобавить одинclick``事件的监听，在回调中操作state` закрывает наш целевой элемент. Код реализации выглядит следующим образом:

componentDidMount() {
    // 点击其他地方隐藏输入框
    document.addEventListener('click', (e) => {
      this.setState({
        showInput: false,
      })
    })
}

Конечно, это относится только к современному браузеру, чтобы быть совместимым с IE, а затем добавить о совместимости браузера, например, событие щелчка, а не вдаваться в подробности.

Суммировать

На самом деле изначально это была очень простая реализация функции, но т.к.ReactЯ сделал прокси события для события клика, так что это не то же самое, что обычная страница.Это то, на что нужно обратить внимание.Выше краткое изложение небольшой ямы в моей ежедневной разработке.Если есть какие-то недоразумения , пожалуйста, поправьте меня Наконец, спасибо за справочный материал.

Ссылаться на

Категории