Question

我试图创建一个新的随机数，它将在方法后设置为状态。它在刷新时非常有效，但我无法生成＆＃39;按钮单击后的新数字。

此处是我的代码：

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返回一个对象。您只是调用this.getInitialState()并丢弃该对象。要更新状态，您需要致电this.setState

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

getInitialState周围没有神奇的包装，该函数只是按照你的要求做的，并且在实例化你的组件时会做出反应。

我删除了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>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
        </table> 
        ); 
  }
}

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

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

React.js生成新的随机数

2 个答案: