Mam problem z bulgotaniem wydarzenia. Mam kartę z funkcją onClick. Na karcie znajduje się ikona serca, która ma również funkcję onClick. Kiedy klikam ikonę serca na karcie, aby w przeciwieństwie do karty, wykonywany jest również przycisk onClick dla całej karty, który przenosi mnie na inną stronę, która przedstawia więcej szczegółów na temat karty, w szczególności ciężarówki z jedzeniem. Jak mogę temu zapobiec?

Próbowałem tego:

const removeFromFavorites = (e, truckId) => {
    props.removeFromFavoriteTrucks(props.dinerId, truckId);
    e.stopPropagation();
}

Ale w przypadku tego kodu pojawia się błąd o treści: „e.stopPropagation nie jest funkcją”.

Karta:

<Card className="truck-card" onClick={() => selectTruck(truck.id)}>
  <CardActionArea>
    <CardMedia
      className="truck-img"
      image={truck.image}
      style={{ width: '100%' }}
    />
    <i
      className="like-icon"
      class={filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
      onClick={() => removeFromFavorites(truck.id)}
    />
    <CardContent className="truck-contents">
      <Typography className="truck-name" gutterBottom variant="h5" component="h2">
        {truck.name}
      </Typography>
      <Typography className="cuisine-type" component="h3">
        {truck.cuisine_type}
      </Typography>
    </CardContent>
  </CardActionArea>
</Card>

Funkcje obsługi kliknięcia:

const selectTruck = truckId => {
  props.setSelectedTruck(truckId);
  setInitialMode(false);
}
const removeFromFavorites = (truckId) => {
  props.removeFromFavoriteTrucks(props.dinerId, truckId)
}

Aktualizacja:

Więc to, co musiałem zrobić, to przekazać e do mojej wewnętrznej funkcji div, wywołać w niej e.stopPropagation, a następnie wstawić e również do mojego onClick. * Przepraszamy za brak elokwencji w wyjaśnianiu tego. Oto kod:

const removeFromFavorites = (e, truckId) => {
    props.removeFromFavoriteTrucks(props.dinerId, truckId);
    e.stopPropagation();
}

<i 
    className="like-icon" 
    class={ filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
    onClick={(e) => removeFromFavorites(e, truck.id)}
/>

enter image description here

1
Jevon Cochran 1 kwiecień 2020, 15:52

4 odpowiedzi

Najlepsza odpowiedź

Dla Ciebie wystarczy przekazać zdarzenie wraz z identyfikatorem ciężarówki do swojej wewnętrznej funkcji div

Zobacz poniższy przykład metody stopPropagation() pochodzący z
https://www.w3schools.com/jsref/tryit.asp?filename= tryjsref_event_stoppropagation

<!DOCTYPE html>
<html>
<body>
<style>
div {
  padding: 50px;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  cursor: pointer;
}
</style>

<h1>The stopPropagation() Method</h1>

<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
  <div onclick="func1(event)">DIV 1</div>
</div>

Stop propagation:
<input type="checkbox" id="check">

<p></p>

<p>Because DIV 1 is inside Div 2, both DIVs get clicked when you click on DIV 1.</p>
<p>Check the stop propagation checkbox, and try again.</p>
<p>The stopPropagation() method allows you to prevent propagation of the current event.</p>

<script>
function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function func2() {
  alert("DIV 2");
}
</script>

</body>
</html>
2
j3ff 1 kwiecień 2020, 15:08

Sprawdź ten kod. Funkcja, której potrzebujesz, nazywa się event.stopPropagation().

<body>
  <div id="parent">
    <button id="child" onclick="event.stopPropagation()">Child</button>
  </div>

  <script>
    var parent = document.querySelector('#parent');
      parent.addEventListener('click', function(){
        console.log("Parent clicked");
      });
    var child = document.querySelector('#child');
      child.addEventListener('click', function(){
        console.log("Child clicked");
      });
  </script>
</body>
1
mgreif 1 kwiecień 2020, 12:59

Możesz spróbować użyć Event.stopPropagation () w funkcji elementu potomnego:

Metoda stopPropagation() interfejsu Event zapobiega dalszemu propagowaniu bieżącego zdarzenia w fazie przechwytywania i propagacji.

const removeFromFavorites = (truckId) => {
  props.removeFromFavoriteTrucks(props.dinerId, truckId);
  event.stopPropagation();
}

Demo:

const selectTruck = truckId => {
  alert('You have clicked Parent');
}
const removeFromFavorites = (truckId) => {
  alert('You have clicked Child');
  event.stopPropagation();
}
div {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  color: green;
}
<div onclick="selectTruck()">Parent
  <div onclick="removeFromFavorites(44)">Child</div>
</div>
1
Mamun 1 kwiecień 2020, 13:09

W swoim zdarzeniu onClick możesz również przekazać zdarzenie, którego możesz użyć, aby dowiedzieć się, kto był nadawcą, używając

<button value="hello!" onClick={e => alert(e.target)}>
  Click me!
</button>
2
user12493039user12493039 1 kwiecień 2020, 13:00