Bloquer un lien par classe avec react

Frédouze
Javascript
Javascript React

Bonjour à tous, je voudrait faire une fonction like avec react, j'ai fait un essai en HTML et cela fonctionne: voici mon code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma page de test</title>
  </head>
  <body>

<a href="teste.html"   class="js-like">Website 1</a>

<a href="teste.html" >Website 2</a>

<script>

    function onClickBtnLike(event) {
    event.preventDefault();

}
document.querySelectorAll('a.js-like').forEach(function (link){
    link.addEventListener('click', onClickBtnLike)
})

        </script>

  </body>
</html>

Donc c'est ce que je veux, le premier lien reste figé et le 2ieme s'ouvre.

Je voudrait faire la même chose avec React mais le lien s'ouvre quand même

Voici mon composent React

import Link from "next/link";
import Slider from "react-slick";
import { useState, useEffect } from 'react';
import React from "react";

const FeaturedProperties = () => {

  const [post, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://localhost:8000/featuredproperties')
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setPosts(data);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  function onClickBtnLike(event) {
    event.preventDefault(); 
  }
  document.querySelectorAll('a.js-like').forEach(function (link) {
    link.addEventListener('click', onClickBtnLike)
  })

  const settings = {
    dots: true,
    arrows: false,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: false,
    speed: 1200,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 4,
        },
      },
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 3,
        },
      },
    ],
  };

  let content = post?.slice(0, 12)?.map((item) => (

    <>
     {/* End .tag */}

     <ul className="icon mb0">
     <li className="list-inline-item">
       <a href="#">
         <span className="flaticon-transfer-1"></span>
       </a>
     </li>
     <li className="list-inline-item">
       <a href={item.lienlike}>
         <span className="flaticon-heart">{item.like}</span>
       </a>
     </li>
   </ul>
   {/* End .icon */}
   </>
  ));

  return (
    <>
      <Slider {...settings} arrows={false}>
        {content}
      </Slider>
    </>
  );
};

export default FeaturedProperties;

Cordialement

3 réponses

Pandazaur

Salut,

Je pense que tu devrais revoir ton message pour afficher du code qui soit plus facilement lisible, ca aiderait à la compréhension.

Cette partie là:

document.querySelectorAll('a.js-like').forEach(function (link) {
link.addEventListener('click', onClickBtnLike)
})

à l'air de ne pas être dans le useEffect donc attention elle va se trigger à chaque "update" de ton composant. Deplus dans ton render, il n'y a plus de lien avec la classe .js-like j'ai l'impression. Donc ton querySelector ne trouvera rien

Grafikart

J'ai mieux mis en forme le code (utilise du markdown la prochaine fois). Comme dit plus haut je ne comprends pas ce que fais ce code

document.querySelectorAll('a.js-like').forEach(function (link) {
   link.addEventListener('click', onClickBtnLike)
})

au milieu de code React

Frédouze
Auteur

Je voudrait faire un sytéme de like, pour cela il faut actionner un lien mais pas ouvrir la page. Cette concion permet de bloquer l'ouverture de la page.

Pandazaur

Pourquoi ne pas utiliser un simple <button> si tu es censé avoir un "lien qui n'ouvre pas de page" ?