React composante de défilement horizontalement sur le bouton clic

Jonathan Lauwers:

Je suis en train de construire une section de la carte qui affiche une liste horizontale des cartes. Cette liste déborde, ce qui rend l'utilisateur doit faire défiler horizontalement pour afficher les cartes hors écran.

Pour rendre ce processus plus facile pour l'utilisateur, je veux créer des boutons qui font défiler la liste horizontale à gauche ou à droite.

J'ai essayé de résoudre ce problème en créant une référence à la liste horizontale et appliquer une scrollx lorsque je clique sur le bouton mentionné précédemment. Cependant, cela entraîne l'erreur suivante:

Cannot add property scrollX, object is not extensible

Mon code:

const ref = useRef(null);

const scroll = () => {
  ref.scrollX += 20;
};

return (
  <div className={style.wrapper} id={id}>
    <Container className={style.container}>
      <Row>
        <Col>
          <button onClick={scroll}>TEST</button>
        </Col>
      </Row>
    </Container>
    <div className={style.projects} ref={ref}>
      {projects.map((data, index) => (
        <CardProject
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
        />
      ))}
    </div>
  </div>
);

litel:

Pour accéder à un nœud DOM avec une référence, vous devez utiliser ref.current; useRef est un conteneur pour un nœud DOM et vous accédez à ce nœud avec la currentpropriété.

De plus, scrollXest une propriété en lecture seule; vous devez appeler scrollLeftpour changer la position de défilement. Pour scrollLefttravailler, vous devez ajouter une overflow-x: scroll;règle à la style.projectspour que cela fonctionne. (Si style.projectsun objet de modification overflowX: 'scroll'.)

Pour pouvoir défiler vers la gauche ou la droite, votre peut ajouter un paramètre à la fonction pour le défilement offset, il ne défile pas toujours raison:

const scroll = (scrollOffset) => {
  ref.current.scrollLeft += scrollOffset;
};

Pour que cela fonctionne, vous aurez besoin de deux boutons dans votre JSX qui passent dans les valeurs de décalage gauche ou droit à la fonction de défilement:

 <Row>
        <Col>
          <button onClick={() => scroll(-20)}>LEFT</button>
          <button onClick={() => scroll(20)}>RIGHT</button>
        </Col>
  </Row>