Блог

Главная - Вопросы по программированию - Как создать два события onclick для интерактивных карточек в react

Как создать два события onclick для интерактивных карточек в react

#reactjs #events

#reactjs #Мероприятия

Вопрос:

Я знаю, что такого рода вопросы задавались раньше, но здесь у меня проблема, когда у меня есть кликабельные карточки и компонент в карточке, который является кнопкой, нажимается вся карточка onclick, но я хочу, чтобы кнопка нажималась при нажатии кнопки, а карточка — при нажатии карты. как я могу отобразить оба события? Как я могу использовать target для обоих событий? Я новичок в react, может кто-нибудь помочь мне отобразить оба.

 Current onclick code:

handleClick = (event) => {
console.log("cards click");
event.preventDefault();
};

handleSubmit(event) {
console.log("button inside card click");
const target = event.target;
}

Комментарии:

1. Есть ли событие onclick на всей карточке? Если да, то происходит то, что сначала выполняется событие onclick вашего btn, а затем событие onclick карты. Это пузырьковое событие, которое передается от дочернего элемента к родительскому в формате обратного дерева

Ответ №1:

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

Этот процесс называется обработкой событий, узнайте больше здесь.

Чтобы устранить вашу проблему, вы должны вызвать event.stopPropagation() внутри обработчика событий вашей кнопки.

 export default function App() {
  function handleClick(event) {
    console.log("cards click");
  }

  function handleSubmit(event) {
    event.stopPropagation(); // notice this
    console.log("button inside card click");
  }

  return (
    <div className="card" onClick={handleClick}>
      <button onClick={handleSubmit}>BUTTON INSIDE CARD</button>
    </div>
  );
}

Редактировать ласковое поле-mjq9c

Ответ №2:

Если вы хотите, чтобы событие onClick для карточек выполнялось до тех пор, пока не будет нажата кнопка, и в этом случае вместо этого вам нужна функция handleSubmit, тогда я бы поместил функцию щелчка по карточке в цикл if для фильтрации по целевому типу события:

handleClick = (e) => { if (e.target.type !== кнопка) { код для события нажатия }}

Ответ №3:

вы можете использовать event.preventDefault(); событие нажатия кнопки внутри

 function handleSubmit(event) {
    event.preventDefault();
    console.log("button inside card click");
  }

Ответ №4:

Это называется пузырьковым отображением событий. Где событие передается от дочернего элемента к родительскому.

event.stoppropagation() останавливает его.

Вы можете просто передать event.target в свой обработчик и проверить, должен ли обработчик выполняться на основе свойств target. Например, вы можете проверить с помощью:

handleClick = (e) => { if (e.target.name /type/id == желаемое имя / тип / идентификатор) { затем ваш код, например,stop.propagation()}

После выполнения вашего подготовленного кода. e.stopPropagation() остановит передачу события его родительскому элементу.