使用React.js的随机数

Question

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

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/

Answer 1

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

这基本上似乎做你想要的: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'));

Answer 2

尝试这个：

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

Answer 3

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

工作代码：

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