0
votes

comment lors du chargement d'une page cliquer sur un bouton en réaction?

Comment, lors du chargement d'une page, cliquer sur un bouton dans react?

J'ai besoin d'un bouton à appuyer lorsque la page se charge

https://codesandbox.io/s/gifted-poitras-3sknp

import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <button onClick={() => alert("loaded")}>button</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

reactjs

2 commentaires

Voulez-vous dire que vous souhaitez alerter lors du chargement de la page?

oui, comme la méthode onLoad

3 Réponses :

1
votes

utilisez useRef pour enregistrer une référence à l'élément button combiné avec useEffect pour détecter quand le composant monte

import React, { useEffect, useRef } from "react";

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    buttonRef.current.click();
  }, []);

  return (
    <div className="App">
      <button ref={buttonRef} onClick={() => alert("button")}>
        button
      </button>
    </div>
  );
}

2 commentaires

J'ai besoin qu'elle appuie sur un bouton lors du chargement d'une page

@recile comme ça?

1
votes

Cherchez-vous quelque chose comme ça. Des clics sur un bouton se produisent lors du chargement de la page et également lorsque vous cliquez sur le bouton?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

class App extends React.Component {
  constructor(){
    super();
    this.buttonClicked = this.buttonClicked.bind(this);
  }
  
  componentDidMount(){
    this.buttonClicked();
  }
  
  buttonClicked(){
    alert("I'm Clicked");
  }

  render() {
    return (
      <button onClick={() => this.buttonClicked()}>
        button
      </button>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

De Référence de l'API React's Hooks

La fonction transmise à useEffect s'exécutera une fois le rendu validé à l'écran.

Vous pouvez donc toujours envisager d'utiliser useEffect pour exécuter les effets secondaires que vous souhaitez juste après le rendu de la page. Assurez-vous de passer [] comme deuxième argument pour vous assurer que la fonction de flèche ne sera appelée qu'une seule fois.

Ceci est un autre exemple d'utilisation du hook useEffect avec document.getElementById (id) au lieu de useRef puisque cela a déjà été mentionné

Il est toujours préférable d'utiliser useRef surtout si le le composant sera réutilisable dans la même page.

import React, {useEffect} from "react";

useEffect(() => {
  document.getElementById("btn").click();
},[]);

function App() {
  return (
    <div className="App">
      <button id="btn" onClick={() => alert("loaded")}>button</button>
    </div>
  );
}

0 commentaires