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/
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'));
random
nulle part. 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>
);
}
}
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'));
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'));
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