React.js 生成新的随机数答案

【问题标题】：React.js generate new random numberReact.js 生成新的随机数
【发布时间】：2015-03-24 10:58:12
【问题描述】：

我正在尝试创建一个新的随机数，该随机数将在方法之后设置为状态。它在刷新时完美运行，但单击按钮后我无法“生成”一个新数字。

这是我目前的代码：

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;

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

【问题讨论】：

标签： javascript random numbers reactjs

【解决方案1】：

看这个例子： 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>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
        </table> 
        ); 
  }
}

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

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

【讨论】：

【解决方案2】：

getInitialState 返回一个对象。你只是打电话给this.getInitialState() 并扔掉这个物体。要更新状态，您需要调用this.setState

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

getInitialState 没有神奇的包装，该函数只是按照您的要求执行，并且在实例化您的组件时被 react 使用。

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

另外，ButtonContainer 应该向上传递答案，而不是更新它的 props 并将自身传递给 onClick 回调。如果您正在阅读自己的道具以外的道具，则有问题。

【讨论】：