使用 React.js 生成随机数

我编写了这段代码，但是当我运行它时，我只得到一个空白页。怎么了？ 看来我确实很接近答案了。我已经尝试了一切，但仍然不起作用。

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

  }
} 

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

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

这基本上似乎是在做你所追求的事情：https://codesandbox.io/s/98n9EkEOJ https://codesandbox.io/s/98n9EkEOJ

这是以防万一的代码：

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