React.js 生成新的随机数

Question

我正在尝试创建一个新的随机数，它将在某个方法后设置为状态。它在刷新时完美运行，但单击按钮后我无法 'generate' 新号码。

这是我目前的代码：

var QuizContainer = React.createClass({

  randomNumber: function(){
    return Math.floor((Math.random() * Data.length) + 0);
  },

  getInitialState: function(){
    var rand = this.randomNumber();
    return {
      answerList: Data[rand].answer,
      answerQuestion: Data[rand].question,
      correctAnswer: Data[rand].correct,
      score: 0,
      timer: 30
    }
  }, 

  success: function(){
    this.setState({score: this.state.score + 1})
  },

  fail: function(){
    this.setState({score: 0})
    this.getInitialState();
  },

  handleClick: function(child){
    child.props.singleAnswer == this.state.correctAnswer ? this.success() : this.fail()
  },

  render: function(){
    return(
      <div>
        <Timer timer={this.state.timer} />
        <Score currentScore={this.state.score} />
        <QuestionContainer answerQuestion={this.state.answerQuestion} />
        <ButtonContainer onClick={this.handleClick} correctAnswer={this.state.correctAnswer} answerList={this.state.answerList} />
      </div>
    )
  }

})

module.exports = QuizContainer;

如果有人能提供帮助，我将不胜感激！谢谢！

Answer 1

getInitialState returns 一个对象。您只是调用 this.getInitialState() 并丢弃该对象。要更新状态，您需要调用 this.setState

  fail: function(){
    this.setState(this.getInitialState());
  },

getInitialState 没有神奇的包装器，该函数只是按照您的指示执行，并且在实例化您的组件时由 React 使用。

我删除了 this.setState({score: 0})，因为它是由您的 getInitialState 提供的。

此外，ButtonContainer 应该向上传递答案，而不是更新其属性并将其自身传递给 onClick 回调。如果你阅读的不是你自己的道具，那就有问题了。

Answer 2

看这个例子： https://jsfiddle.net/danyaljj/1cban4oy/

var colors = ['silver', 'gray', 'red', 'maroon', 'yellow', 'olive', 'lime', 'green', 
              'aqua', 'teal', 'blue', 'navy', 'fuchsia', 'purple']; 

var category = {"cat": "1"}; 

class SampleApplication extends React.Component {
  constructor(props) {
    super(props);
    this.state = { BKColor: 'red', question: {}};
  }
  render() {
    var rand = Math.floor((Math.random() * 8)); 
    return (
        <table> 
            <tr>
                <th style={{ backgroundColor: colors[rand] }}>Month</th>
                <th>{colors[1]}</th> 
              </tr>
              <tr>
                <td>January {rand}</td>
                <td>0</td>
              </tr>
              <tr>
                <td>February</td>
                <td></td>
              </tr>
        </table> 
        ); 
  }
}

React.render(<SampleApplication />, document.body);

我生成了一个 table，其中一个单元格随机着色。

React.js 生成新的随机数

React.js generate new random number

javascript

random

numbers

reactjs