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

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

Answer 3

我认为你需要移动这一行

public class CollectionExtractor extends ValueExtractor<Set<MyObject>, String> {

    @Override
    public void extract(
            final Set<MyObject> target,
            final String argument,
            final ValueCollector collector ) {

        if ( argument.equals( "field_1" ) ) {
            for ( final MyObject o : target ) {
                collector.addObject( o.getField_1() );
            }
        } else if ( argument.equals( "field_2" ) ) {
            for ( final MyObject o : target ) {
                collector.addObject( o.getField_2() );
            }
        }
    }
}

@Getter
public class MyObject implements Serializable {

    private String field_1;
    private String field_2;
}

不仅来自React.render(<Button />, document.querySelector('#container'));方法，甚至来自班级。

你需要做一些改变

所以你的代码就像：

render

Answer 4

试试这个：

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 5

有一种使用

创建随机数的简单方法

随机字符串

accessibilityHelp()

此处是有关更多详细信息的文档 random-string

Answer 6

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

使用React.js

6 个答案: