Javascript 使用 React.js 的随机数

Random number using React.js

提问by Damien Asseya

I wrote this code, but when I run it, I only get a blank page. What is wrong? It does seem that I am close to the answer. I've tried everything, but it is still not working.

我写了这段代码，但是当我运行它时，我只得到一个空白页。怎么了？看来我已经接近答案了。我已经尝试了一切，但仍然无法正常工作。

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/

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

回答by Rodrigo

Remove all your logic from the render function and add it to the click handler method. Also the onClick is missing a curly bracket at the end. Finally you're not indicating the state property you're updating in the setState()method.

从渲染函数中删除所有逻辑并将其添加到单击处理程序方法中。此外 onClick 在末尾缺少一个大括号。最后，您没有在setState()方法中指明要更新的 state 属性。

This basically seems to do what you're after: https://codesandbox.io/s/98n9EkEOJ

这基本上似乎可以满足您的要求：https: //codesandbox.io/s/98n9EkEOJ

This is the code just in case:

这是以防万一的代码：

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'));

回答by kind user

• Firstly, you didn't set the state properly.
• Secondly, use arrow functions so you can avoid problematic binding.
• Thirdly, you didn't display the randomvalue anywhere.
• Lastly - you can move the minand maxvariables outside the renderfunction. Also the whole math logic responsible for rolling a random number can be moved into the handleClickfunction.

• 首先，您没有正确设置状态。
• 其次，使用箭头函数可以避免有问题的绑定。
• 第三，您没有在random任何地方显示该值。
• 最后 - 您可以将min和max变量移到render函数之外。负责滚动随机数的整个数学逻辑也可以移到handleClick函数中。

Working code:

工作代码：

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>
    );
  }
}

回答by Andrew

Try this:

尝试这个：

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'));

回答by Ali

i think you need move this line

我认为你需要移动这条线

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

not only from rendermethod but even from the class.

不仅来自render方法，甚至来自类。

and you need to do some changes

你需要做一些改变

so your code be like :

所以你的代码是这样的：

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'));

回答by Saad Mirza

There is an easy way to create Random Number using

有一种简单的方法可以使用创建随机数

random-string

随机字符串

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

});

Here is the documentation for more details random-string

这是有关更多详细信息随机字符串的文档