Почему родительский onClick срабатывает перед дочерним onChange - PullRequest
Новая
       74

Почему родительский onClick срабатывает перед дочерним onChange

1 голос
/ 08 мая 2020

У меня есть basi c HTML в моем проекте React, который выглядит так: 

<div
  onClick={(e) => this.handleRowClick(e, id)}>
  <p>
    <input
      type="checkbox"
      onChange={this.handleSelectOneChange} />
  </p>
</div>

JS: 

  handleRowClick(event, item_id) {
     // do stuff
  }

  handleSelectOneChange(event) {
    event.stopPropagation();
  }

Когда я нажимаю на флажок, он запускает handleRowClick также в родительском Div. Хотя у меня в дочерней функции есть stopPropagation(). Однако, когда я вхожу в журнал, он вызывает родительскую функцию перед дочерней функцией (флажок), поэтому я могу понять, почему stopPropagation() не работает.

Есть ли лучший способ сделать это? Или мне просто нужно будет проверить, какой тип элемента был нажат, прежде чем что-либо делать. Например, в функции родительского щелчка ничего не делайте, если «цель» - это флажок. Похоже, что это взлом, а не правильный способ справиться с этим.

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

Весьма вероятно, что щелчок по флажку вызывает событие 'click', которое поднимается до div. Так что вы можете захотеть зафиксировать событие щелчка ввода до того, как оно всплывет.

Как насчет того, чтобы попробовать это: 

<input
  type="checkbox"
  onClick={this.handleCheckboxClick}
  onChange={this.handleSelectOneChange} />

this.handleCheckboxClick(evt) {
  event.stopPropagation();
}

Этот фрагмент показывает последовательность событий. При установке флажка эти события производятся в следующем порядке:

ввод onclick
div onclick
ввод onchange 

<div onclick="console.log('div onclick');">
  Checkbox:
  <input type="checkbox"
    onclick="console.log('input onclick');"
    onchange="console.log('input onchange');" />
</div>
0 голосов
/ 08 мая 2020

Наверняка произойдет событие щелчка. поскольку флажок заключен в div, который уже имеет событие щелчка, и событие щелчка имеет больший приоритет, чем onChange, для обработки logi c здесь вы должны использовать

e.target.id or e.target.name, чтобы идентифицировать элемент.

...