web-dev-qa-db-fra.com

Nombre aléatoire en utilisant React.js

J'ai écrit ce code, mais lorsque je l'exécute, je n'ai qu'une page vierge. Quel est le problème? Il semble que je suis proche de la réponse. J'ai tout essayé, mais ça ne fonctionne toujours pas.

class Button extends React.Component {

  constructor(props) {
   super(props);
   this.state = {
   random: 0
    }
   }


   render() {
   var min = 1;
   var max = 100;
   var Rand =  min + (Math.random() * (max-min));
   handleClick() {
    this.setState ({this.state.random + this.Rand})
   }
    return (
      <div>
       <button value="Click me!" onClick={this.handleClick.bind(this)></button>
       </div>
      );

 React.render(<Button />, document.querySelector('#container'));

  }
}

JSFIDLLE: https://jsfiddle.net/1cban4oy/12/

javascriptreactjsecmascript-6
6
Damien Asseya

Supprimez toute votre logique de la fonction de rendu et ajoutez-la à la méthode du gestionnaire de clics. Il manque également une accolade à la fin du onClick. Enfin, vous n'indiquez pas la propriété state que vous mettez à jour dans la méthode setState().

Cela semble fondamentalement faire ce que vous recherchez: https://codesandbox.io/s/98n9EkEOJ

C'est le code juste au cas où: 

import React from 'react';
import { render } from 'react-dom';

class Button extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { random: 0 };
  }

  handleClick() {
    const min = 1;
    const max = 100;
    const Rand = min + Math.random() * (max - min);
    this.setState({ random: this.state.random + Rand });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>Click</button>
        <div>The number is: {this.state.random}</div>
      </div>
    );
  }
}

render(<Button />, document.getElementById('container'));
7
Rodrigo
  • Tout d'abord, vous n'avez pas défini l'état correctement. 
  • Deuxièmement, utilisez les fonctions de flèche pour éviter les problèmes de reliure. 
  • Troisièmement, vous n’avez affiché la valeur random nulle part. 
  • Enfin, vous pouvez déplacer les variables min et max en dehors de la fonction render. De plus, toute la logique mathématique responsable du roulement d'un nombre aléatoire peut être déplacée dans la fonction handleClick.

Code de travail:

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      random: null,
    }
  }

  min = 1;
  max = 100;

  handleClick = () => {
    this.setState({random: this.min + (Math.random() * (this.max - this.min))});
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        {this.state.random}
      </div>
    );
  }
}
4
kind user

Essaye ça:

class Button extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            random: null
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        const min = 1;
        const max = 100;
        const random = min + (Math.random() * (max - min));
        this.setState({ random })
    }
    render() {
        return (
            <div>
                <button value="Click me!" onClick={this.handleClick}>{this.state.random}</button>
            </div>
        );


    }
}
React.render(<Button />, document.querySelector('#container'));
2
Andrew

je pense que vous devez déplacer cette ligne 

React.render(<Button />, document.querySelector('#container'));

non seulement de la méthode render mais même de la classe.

et vous devez faire des changements

donc votre code soit comme: 

class Button extends React.Component {

  constructor(props) {
   super(props);
   this.state = {
   random: 0
    }
   }

   handleClick = () => {
      var min = 1;
      var max = 100;
      var Rand =  min + (Math.random() * (max-min));
      this.setState ({this.state.random : Rand})
   }

   render() {


    return (
      <div>
       <button value="Click me!" onClick={this.handleClick}> {this.state.random} </button>
       </div>
      );
  }


} 

React.render(<Button />, document.querySelector('#container'));
2
Ali

Il existe un moyen simple de créer un nombre aléatoire en utilisant 

chaîne aléatoire 

var x = randomString({
length: 8,
numeric: true,
letters: false,
special: false,

});

Voici la documentation pour plus de détails random-string

0
Saad Mirza