4
votes

Créer un compte à rebours

Je veux créer un compte à rebours dans React Js dans lequel j'utiliserai Start (pour démarrer le compte à rebours), Stop (pour arrêter le compte à rebours) et réinitialiser (pour réinitialiser le chronomètre) comme dans l'exemple d'image.

En tant que développeur débutant en React JS et en javascript globalement, j'ai commencé par tester le bouton. Après cela, j'ai créé une fonction" secondPass "pour calculer le temps restant et ensuite l'afficher. La variable "countDown" sert à arrêter le "setinterval" après cela avec "clearInterval (countDown)".

Le problème est que j'obtiens un msg d'erreur dans la plateforme "codesandbox" comme sur l'image. peut expliquer mon erreur et si pas trop demandé, aidez-moi à écrire un code très simple pour réaliser mon projet.

Voici le code React:

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  function secondPass() {

  var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

  var remSeconds = seconds % 60;   // To Determine The Seconds

}

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

javascript reactjs

3 commentaires

Qu'est-ce que le compte à rebours? Vous devez l'initialiser avec un mot-clé. Essayez de mettre let avant countDown = ...

Vous avez des erreurs de syntaxe. En gros, vous ne pouvez pas définir les variables ( secondes ) et les méthodes comme vous le faites, c'est une mauvaise syntaxe. Vous pouvez trouver ce lien utile developer.mozilla.org/en- États-Unis / docs / Web / JavaScript / Reference /…

essayez sans le mot-clé function lors de la définition de la méthode secondPass () .

3 Réponses :

1
votes

supprimer le mot-clé function pour la fonction secondPass . vous n'avez pas besoin de mot-clé de fonction pour la fonction si vous le déclarez dans une classe.

faites-le comme,

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  secondPass() {

    var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

    var remSeconds = seconds % 60;   // To Determine The Seconds

  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

0 commentaires

2
votes

C'est parce que secondPass est une fonction membre définie dans le corps de la classe Timer . Dans JS, vous n'avez pas besoin de la function avant cela, déclarez-le comme render: changez function secondPass en secondPass

0 commentaires

1
votes

Vous n'avez pas besoin d'utiliser le mot-clé de fonction lors de la déclaration de fonctions dans une classe pour la fonction secondPass. C'est la nouvelle syntaxe ES6.

0 commentaires