使用 React.js 的随机数答案

【问题标题】：Random number using React.js使用 React.js 的随机数
【发布时间】：2017-07-18 19:50:41
【问题描述】：

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

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/

【问题讨论】：

没有绑定到按钮的操作。
即使绑定了动作，它也不起作用。
您的 sn-p 不是有效的 JS。不知何故，您的 handleClick 函数在 render 内，而 React.render 在 Button 内。
你真的要在浏览器中运行 JSX 吗？你在翻译它吗？您的浏览器控制台中出现什么错误？
帮助我们重现您的问题。 JSX 通常需要一些 HTML 加载页面等。请将重现问题所需的所有内容添加到众所周知的 javascript REPL（如 jsbin）中，并提供指向该链接的链接。

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

这基本上似乎可以满足您的需求： 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'));

【讨论】：

【解决方案2】：

首先，您没有正确设置状态。
其次，使用箭头函数可以避免出现问题的绑定。
第三，您没有在任何地方显示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>
    );
  }
}

【讨论】：

我喜欢使用箭头函数的技巧——谢谢！我通常在构造函数中使用this.handleClick = this.handleClick.bind(this); 来解决这个问题。箭头方法更干净！

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

我认为你需要移动这条线

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

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

你需要做一些改变

所以你的代码是这样的：

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

【讨论】：

【解决方案5】：

有一种简单的方法可以使用

创建随机数

随机字符串

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

});

这里是更多细节的文档 random-string

【讨论】：

【解决方案6】：

React 中数组中的随机数： [Math.floor(Math.random() * 20)]

【讨论】：