wake-up-neo.com

Zufallszahl mit React.js

Ich habe diesen Code geschrieben, aber wenn ich ihn starte, bekomme ich nur eine leere Seite. Was ist falsch? ... Es scheint, dass ich der Antwort nahe bin. Ich habe alles versucht, aber es funktioniert immer noch nicht.

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/

6
Damien Asseya

Entfernen Sie Ihre gesamte Logik aus der Renderfunktion und fügen Sie sie der Click-Handler-Methode hinzu. Auch beim onClick fehlt am Ende eine geschweifte Klammer. Schließlich geben Sie nicht die Statuseigenschaft an, die Sie in der setState()-Methode aktualisieren.

Im Grunde scheint das zu tun, was Sie suchen: https://codesandbox.io/s/98n9EkEOJ

Dies ist der Code nur für den Fall:

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
  • Erstens haben Sie den Status nicht richtig festgelegt. 
  • Zweitens verwenden Sie Pfeilfunktionen, um problematische Bindungen zu vermeiden. 
  • Drittens haben Sie den random-Wert nirgendwo angezeigt. 
  • Zuletzt können Sie die Variablen min und max außerhalb der Funktion render verschieben. Auch die gesamte mathematische Logik, die für das Rollen einer Zufallszahl verantwortlich ist, kann in die handleClick-Funktion verschoben werden.

Arbeitscode:

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

Versuche dies:

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

ich denke, Sie müssen diese Linie verschieben 

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

nicht nur von der render-Methode, sondern sogar von der Klasse.

und Sie müssen einige Änderungen vornehmen

ihr Code lautet also: 

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

Es gibt eine einfache Möglichkeit, Zufallszahlen mit zu erstellen 

zufällige Zeichenfolge 

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

});

Hier finden Sie die Dokumentation für weitere Details random-string

0
Saad Mirza