0
votes

scrollIntoView onClick reactjs

bonjour j'ai quelques boutons et je veux y faire défiler quand on clique dessus.

image 1: scroll in random position
image 2: when you click on button 1
image 3: when you click on button 2
image 4: when you click on button 3

comme vous pouvez le voir, il y a beaucoup de scrolls causés par ces 2 divs. l'idée est de faire défiler vers le bas et lorsque vous atteignez les boutons et cliquez sur celui dont vous avez besoin. la page défile jusqu'à ce bouton en le laissant en haut de la page

 const [active, setActive] = useState(0);

 useEffect(() => {
     // IÂ´m not using useRef. is there other way to automatically scroll to the element and stop at 0 0 of the page?
 })


<div style={{height: '10000px'}} />
<button onClick={() setActive(1)}>button 1</button>
<button onClick={() setActive(2)}>button 2</button>
<button onClick={() setActive(3)}>button 3</button>
<div style={{height: '10000px'}} />

javascript reactjs

2 commentaires

En cliquant sur les boutons où voulez-vous faire défiler? À quelle division voulez-vous faire défiler lorsque vous cliquez sur un bouton?

en haut de la page. 0 0 (l'ajoutant à la question) merci

3 Réponses :

-1
votes

Ici, vous souhaitez utiliser un gestionnaire d'événements .

  const handleClick = (e) => {
   //  scrollIntoView logic and set state
  }

  <div onClick={handleClick}/>

0 commentaires

1
votes

Pour faire défiler la vue de réaction vers le haut, il existe une fonction simple.

utilisez window.scrollTo(0, 0);

dans votre code, essayez ceci.

<button onClick={()=> window.scrollTo(0, 0) }>button 1</button>

édité:

Je pourrais trouver cette solution après avoir modifié votre question.

import React, { useRef } from "react";

export default function App() {
  return (
    <div className="App">
      <div style={{ height: "10000px" }} />
      <MyButton>button 1</MyButton>
      <MyButton>button 2</MyButton>
      <MyButton>button 3</MyButton>
      <div style={{ height: "10000px" }} />
    </div>
  );
}

const MyButton = props => {
  const buttonRef = useRef();

  const handleScroll = () => {
    window.scrollTo({
      behavior: "smooth",
      top: buttonRef.current.offsetTop
    });
  };

  return (
    <div>
      <button ref={buttonRef} onClick={handleScroll}>
        {props.children}
      </button>
    </div>
  );
};

Veuillez l'essayer. Faites-moi savoir si c'est ce que vous avez demandé.

Modifié après la question posée dans le commentaire pour utiliser un seul composant avec Ref et utiliser ce composant en plusieurs nombres:

Si vous souhaitez utiliser un seul composant pour le bouton, essayez ceci,

import React, { useRef } from "react";

export default function App() {
  const button1Ref = useRef();
  const button2Ref = useRef();
  const button3Ref = useRef();

  const handleScroll = ref => {
    window.scrollTo({
      behavior: "smooth",
      top: ref.current.offsetTop
    });
  };

  return (
    <div className="App">
      <div style={{ height: "10000px" }} />
      <div>
        <button ref={button1Ref} onClick={() => handleScroll(button1Ref)}>
          button 1
        </button>
      </div>
      <div>
        <button ref={button2Ref} onClick={() => handleScroll(button2Ref)}>
          button 2
        </button>
      </div>
      <div>
        <button ref={button3Ref} onClick={() => handleScroll(button3Ref)}>
          button 3
        </button>
      </div>
      <div style={{ height: "10000px" }} />
    </div>
  );
}

7 commentaires

mais cela laissera le bouton hors de l'écran

Pardon. Je ne t'ai pas compris. Lorsque vous cliquez sur le bouton, vous voulez le faire défiler jusqu'à la fenêtre en haut à droite?

pas de soucis. Je viens d'ajouter une image pour l'expliquer. Vérifiez-le!

existe-t-il un moyen de le déplacer vers le composant bouton? Je peux le convertir en <MyBytton />

Hey. Essayez le dernier morceau de code. Cela résoudra votre problème en utilisant buttonComponent. @Beau

Je veux dire, pouvons-nous définir la référence à l'intérieur du composant? nous n'avons donc pas à le définir dans le composant principal. et cela nous permettra de créer plusieurs boutons et de ne pas avoir à nous soucier de définir la référence dans le composant principal

Oui, vous pouvez ... Vérifiez à nouveau le dernier morceau de code. Ceci devrait répondre à votre question.

-1
votes

//action
const goDown= (e) => {
    const anchor = document.querySelector('#some-id')
    anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
}

// click to scroll
<Link onClick={goDown}>Choose Health</Link>


//element you want to scroll to
<div id='some-id'>
</div>

1 commentaires

Veuillez expliquer votre solution et utiliser un bloc de code au lieu d'un extrait de code pour le code non exécutable.