Javascript 单击按钮时的页面更新（reactjs）

假设我想在单击一个按钮后再次呈现页面。我怎样才能做到呢？特别是当你点击按钮时，你会如何改变我的程序来生成随机文本

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({   
    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        return <div> {rows} </div>; 
    }, 
    handleSubmit() { 

    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
            </section>
        {this.randomNumberOfRandomText()} 
        </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

var colors=[“红色”、“黄色”、“蓝色”、“绿色”]；
var Hello=React.createClass（{
随机文本（颜色）{
变量样式={
颜色：颜色[颜色]，
}
返回（随机文本）；
}, 
randomNumberOfRandomText（）{
var color=Math.floor（（Math.random（）*5））；
var行=[]；
var num=Math.floor（（Math.random（）*5）+1）；
对于（变量i=0；i

---

请注意，我们不希望看到页面中前面的元素

事实上，为什么不使用setState和getInitialState

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({

    getInitialState() {
        return {
            text: []
        }
    },

    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        this.setState({text: rows});
    }, 
    handleSubmit() { 
        this.randomNumberOfRandomText();
    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
        </section>
        <div>{this.state.text}</div> 
       </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

var colors=[“红色”、“黄色”、“蓝色”、“绿色”]；
var Hello=React.createClass({
getInitialState（）{
返回{
案文：[]
}
},
随机文本（颜色）{
变量样式={
颜色：颜色[颜色]，
}
返回（随机文本）；
}, 
randomNumberOfRandomText（）{
var color=Math.floor（（Math.random（）*5））；
var行=[]；
var num=Math.floor（（Math.random（）*5）+1）；
对于（变量i=0；i

我更新

单击handleSubmit（）时，执行randomNumberOfRandomText（）以更新元素的状态

setState（）将始终触发重新渲染

---

在大多数情况下，Jean的答案是更新组件数据的最佳方法。话虽如此，下面的代码也满足了您的需求

我之所以包括它，是因为forceUpdate（）在像您这样的情况下非常有用，因为组件中正在更新的数据是psuedorandom生成器的结果。由于您的优先级是模拟随机行为，而不是更新组件状态或道具数据，forceUpdate（）可以更干净地使此特定更新重新呈现自身

发件人：

如果render（）方法读取的不是this.props或this.state，则需要通过调用forceUpdate（）告知React何时需要重新运行render（）

var colors=[“红色”、“黄色”、“蓝色”、“绿色”]；
var Hello=React.createClass（{
随机文本（颜色）{
变量样式={
颜色：颜色[颜色]，
}
返回（随机文本）；
}, 
randomNumberOfRandomText（）{
var color=Math.floor（（Math.random（）*5））；
var行=[]；
var num=Math.floor（（Math.random（）*5）+1）；
对于（变量i=0；i

Hi，handleSubmit（））不包含任何内容？！？其实我觉得你的答案更好。在大多数情况下，您需要尽可能少的状态。当您可以调用

forceUpdate（）

以使用新的随机生成的文本重新呈现组件时，没有理由将此随机生成的文本保留为状态。酷！我不知道最后一句话：“setState（）将始终触发重新渲染”。因为当调用setState（）时，此方法执行渲染组件方法。对不起，我应该指定反应文档！

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({   
    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        return <div> {rows} </div>; 
    }, 
    handleSubmit(e) { 
      e.preventDefault();
      this.forceUpdate();
    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
            </section>
        {this.randomNumberOfRandomText()} 
        </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));